//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this.$refs.main);
/* 深拷贝一下 生成两个不同的对象 */
this.lineList = JSON.parse(JSON.stringify(this.reportsList));
/* 展示标题 */
this.lineList.title = {
text: "华东饼图数据",
};
/* 展示提示框组件 */
this.lineList.tooltip = {
/* a表示系列名 <br/>表示换行 b表示数据名 c表示数据值 d表示所占的百分比 */
formatter: '{a} <br> {b} <br> {c} <br> ({d}%)'
};
/* 把图例的位置调整一下 */
this.lineList.legend.top = '10%';
this.lineList.legend.left = '0';
/* 只显示华东的饼图数据 */
this.lineList.series.splice(1)
/* 先把图标的类型都改成饼图 */
this.lineList.series[0].type = 'pie';
/* 把图例中除了华东的图例都删掉 */
this.lineList.legend.data.splice(1);
/* 拿到时间集合用来展示饼图的name值 */
let nameList = this.lineList.xAxis[0].data;
/* 拿到数据用来展示饼图的value值 */
let valueList = this.lineList.series[0].data;
/* let data = [{
name:"2017-12-27",
value:2999
}] */
let newArr = [];
/* 下面的操作是为了把两个数组整合成上面的格式 */
nameList.forEach((r, i) => {
let obj = {
name: r,
/* 因为两个数组的长度是一样的，
索引对应的值也是一样的，key和value的值是相对应，
所以直接使用如下方式取值 */
value: valueList[i]
}
/* 把组装好的对象塞到新数组中 */
newArr.push(obj)
})
/* 给华东的数据组转好格式后重新赋值，为了展示饼图线对应的名字 */
this.lineList.series[0].data = newArr;
/* 设置饼图的圆心的大小和圆的大小 */
this.lineList.series[0].radius = ['10%', '45%'];
/* 设置圆的上下左右的距离 */
this.lineList.series[0].center = ['58%', '60%'];
/* 把圆的形状设置成玫瑰形 */
this.lineList.series[0].roseType = 'area';
/* 给圆设置圆角 */
this.lineList.series[0].itemStyle = {
borderRadius: 5
}
/* 把x轴隐藏 */
this.lineList.xAxis = {
show: false
}
/* 把y轴隐藏 */
this.lineList.yAxis = {
show: false
}
// 绘制图表
myChart.setOption(this.lineList);
window.PieChart = myChart;
},
