在后台管理系统中,图表是一个很普遍的元素。目前常用的图标插件有 chartsEcharts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。

一、安装插件

使用 cnpm 安装 Echarts

cnpm install echarts -S

和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用

通常是在需要使用图表的 .vue 文件中直接引入

import echarts from 'echarts'

也可以在 main.js 中引入,然后修改原型链

Vue.prototype.$echarts = echarts 

然后就可以全局使用了

let myChart = this.$echarts.init(document.getElementById('myChart'))

二、创建图表

首先需要在 HTML 中创建图表的容器

aaarticlea/png;base64,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" alt="" />

需要注意的是,图表的容器必须指定宽高,也就是说 width,height 不能使用百分比,只能用 px

这样确实不够灵活,不过我们可以用 js 来改变 width 和 height,使图表容器能够自适应,具体的实现请往后看

aaarticlea/png;base64,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" alt="" />

然后在 mounted 中创建图表,具体的配置参考官方文档,这里不再赘述

三、按需引入

上面引入的 echarts 包含了所有图表,但有时候我们只需要一两个基本图表,这时候完整的 echarts 就显得累赘

假如只需要创建一个饼图,那么可以这么做:

  // 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼图组件
require('echarts/lib/chart/pie')
// 引入提示框和图例组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')

可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js

四、适应容器

上面说过,图表的容器必须固定宽高,这确实是一个比较反人类的设定

为了解决这个问题,需要给图表容器外面再加一个容器,而这个外容器的宽高可以适应页面。上面的 <div class="charts"> 就是这样的外容器

let chartBox = document.getElementsByClassName('charts')[]
let myChart = document.getElementById('myChart') // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
function resizeCharts () {
myChart.style.width = chartBox.style.width + 'px'
myChart.style.height = chartBox.style.height + 'px'
}
// 设置容器高宽
resizeCharts()

let mainChart = echarts.init(myChart)
mainChart.setOption(options)

当页面加载的时候,将外容器的宽高,赋给图表容器

但这只是解决了页面加载时的自适应问题

如果在页面加载之后,仍需要图表自适应宽高,就需要用到 echarts 的媒体查询

Vue 爬坑之路(八)—— 使用 Echarts 创建图表的更多相关文章

  1. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  2. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  3. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  4. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  5. Vue 爬坑之路—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios  ...

  6. vue爬坑之路1-路由跳转全新页面以及二级页面配置

    之前也在网找了一些答案,比较零碎,特此总结下,废话不多说,直接上干货! 路由跳转全新页面 首先在app.vue中先定义router-view,这是主路由. 在router的index.js中引入log ...

  7. vue爬坑之路(插件安装)

    npm install vue-table-with-tree-grid --save import ZkTable from 'vue-table-with-tree-grid' Vue.use(Z ...

  8. Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  9. Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

    在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...

随机推荐

  1. 深入解析Java垃圾回收机制

    引入垃圾回收 哪些内存需要回收? 引用计数法 可达性分析 如何回收 Marking 标记 Normal Deletion 清除 Deletion with Compacting 压缩 为什么需要分代收 ...

  2. Oracle table names are case sensitive (normally all uppercase)

    oracle_fdw error desc: postgres=# select * from test; ERROR:  Oracle table "sangli"." ...

  3. 自己动手写http服务器——线程池(一)

    创建一个线程池,每有一个连接对象就将它添加到工作队列中,线程池中的线程通过竞争来取得任务并执行它(它是通过信号量实现的). //filename threadpool.h #ifndef THREAD ...

  4. Linux多线程编程——线程的创建与退出

    POSIX线程标准:该标准定义了创建和操纵线程的一整套API.在类Unix操作系统(Unix.Linux.Mac OS X等)中,都使用Pthreads作为操作系统的线程.Windows操作系统也有其 ...

  5. Model中内部类meta详解

    Django 模型类的Meta是一个内部类,它用于定义一些Django模型类的行为特性. 以下对此作一总结: Model 元数据就是 "不是一个字段的任何数据" -- 比如排序选项 ...

  6. python爬虫(五)_urllib2:Get请求和Post请求

    本篇将介绍urllib2的Get和Post方法,更多内容请参考:python学习指南 urllib2默认只支持HTTP/HTTPS的GET和POST方法 urllib.urlencode() urll ...

  7. Android最佳性能实践(四)——布局优化技巧

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43376527 在前面几篇文章其中.我们学习了怎样通过合理管理内存,以及高性能编码技 ...

  8. zookeeper web ui--&gt;node-zk-browser安装

    眼下公司正在使用zookeeper做配置管理和其它工作,在网上找几个zookeeper管理工具,都不尽人意,要么功能不够强大,要么不能友好的浏览zk树形结构.我的想法是zk管理工具,应该有一个树形结构 ...

  9. JavaScript实现八大内部排序算法

    注:基数排序中:r是关键字的基数,d是长度,n是关键字的个数 1.插入排序 基本思想:在序号i之前的元素(0到i-1)已经排好序,本趟需要找到i对应的元素x (此时即arr[i]) 的正确位置k,在寻 ...

  10. 关于close和shutdown

    我们知道TCP是全双工的,可以在接收数据的同时发送数据.假设有主机A在和主机B通信,可以认为是在两者之间存在两个管道.就像这样:A ---------> BA <--------- B 1 ...