vue 插件 使用 Echarts 建立图表 （转）

在后台管理系统中，图表是一个很广泛的元素。目前经常使用的图标插件有 charts,  Echarts, highcharts。此次将介绍 Echarts 在 Vue 项目中的应用。

 

1、安装插件

使用 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'))

 

2、建立图表

首先须要在 HTML 中建立图表的容器

 

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

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

 

而后在 mounted 中建立图表，具体的配置参考官方文档，这里再也不赘述

 

3、按需引入

上面引入的 echarts 包含了全部图表，但有时候咱们只须要一两个基本图表，这时候完整的 echarts 就显得累赘

假如只须要建立一个饼图，那么能够这么作：

1.  
   // 引入基本模板
2.  
   let echarts = require('echarts/lib/echarts')
3.  
   // 引入饼图组件
4.  
   require('echarts/lib/chart/pie')
5.  
   // 引入提示框和图例组件
6.  
   require('echarts/lib/component/tooltip')
7.  
   require('echarts/lib/component/legend')

之因此使用 require 而不是 import，是由于 require 能够直接从 node_modules 中查找，而 import 必须把路径写全

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

 

4、适应容器

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

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

1.   let chartBox = document.getElementsByClassName('charts')[0]
2.   let myChart = document.getElementById('myChart')
3.   
4.   // 用于使chart自适应高度和宽度,经过窗体高宽计算容器高宽
5.   function resizeCharts () {
6.  myChart.style.width = chartBox.style.width + 'px'
7.  myChart.style.height = chartBox.style.height + 'px'
8.  }
9.   // 设置容器高宽
10.  resizeCharts()
11.   
12.   let mainChart = echarts.init(myChart)
13.  mainChart.setOption(options)

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

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

若是在页面加载以后，仍须要图表自适应宽高，就须要用到 echarts 的媒体查询

转自 https://blog.csdn.net/bbsyi/article/details/77897780