vue中echarts使用

1、安装echarts依赖

npm install echarts -S 
//或使用cnpm 淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

2、引入方式

• 全局引入

//main.js中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

• 按需引入

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

由于全局引入会将所有的echarts图表打包，导致体积过大 ,建议按需引入。

3、在vue中使用

<div class="echarts" id="echarts"></div>

• 必须设置宽高

.echarts {
  width: 20rem;
  height: 14rem;
}

• 方法调用

drawEchart() {
      let pieOptions = this.$echarts.init(document.getElementById("echarts"));
      pieOptions.setOption({
          tooltip: {
          show: false,
        }，
          // ……
      })
}

要确保dom元素已经挂载到页面中，故在mounted生命周期函数中实例化echarts对象。

4、自适应页面变化

window.addEventListener("resize", function() {
    pieOptions.resize();
});