在vue中使用echarts

首先使用npm下载，

其次在main.js中引入

const echarts = require(‘echarts‘);
// import * as echarts from ‘echarts‘

Vue.prototype.$echarts = echarts

然后在vue组件中引用
在第一个div中引用该组件名，如

<div class="chartsUse"></div>

接下来在下一个div中使用id或ref来标识，并给出高宽，如

<div ref="pie" style="width: 100%;height: 200px"></div>

在methods中使用：

initEcharts() {
  let charts = this.$echarts.init(this.$refs.pie);
  this.charts.setOption({//图表的配置内容})
}
最后在mounted中使用:

mounted() {
  this.initEcharts();
}


echarts随屏幕的变化而变化

let sizeFun = () => {
  this.charts.resize();
};
window.addEventListener(‘resize‘, sizeFun);

半饼状图：

startAngle: 0,　　　　// 　　决定初始角度，0从最右边顺时针开始

根据roseType的设定有所不同，一个创建一个透明数据，数值是其他数值的总和，另一个是有多少数据就创建多少透明数据

radius: [50, 100],　　　　// 　　设置大小，第一个数是内圆，第二个数是扇形大小
center: [‘50%‘, ‘50%‘],　　　　//   哪个做为中心位置

echarts的使用