<script>
import * as echarts from "echarts";
export default {
name: "PieChart",
props:['reportList'],
data() {
return {
pieList: {},
};
},
mounted() {
var myChart = echarts.init(document.getElementById("pie"));
this.pieList = JSON.parse(JSON.stringify(this.reportList));
// 只显示华东的饼图
this.pieList.series.splice(1);
// 标题
this.pieList.title = { text: "华东数据" };
// 触摸提示 提示框浮层内容格式器formatter
// 饼图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
this.pieList.tooltip = {formatter: '{a}<br />{b}: {c} ({d}%)'};
// 图例位置
this.pieList.legend.top = "10%";
this.pieList.legend.left = "0";
// 修改图表类型
this.pieList.series[0].type = "pie";
// 把图例除了华东都删除
this.pieList.legend.data.splice(1);
// 拿到时间和数值，整合数据格式，展示线对应的名字
let nameList = this.pieList.xAxis[0].data;
let valueList = this.pieList.series[0].data;
let newArr = [];
nameList.forEach((r, i) => {
let obj = {
name: r,
value: valueList[i],
};
newArr.push(obj);
});
this.pieList.series[0].data = newArr;
// 设置圆心、半径大小
this.pieList.series[0].radius = ["10%", "50%"];
// 设置饼图上下左右位置
this.pieList.series[0].center = ["50%", "60%"];
// 形状玫瑰
this.pieList.series[0].roseType = "area";
// 设置圆角
this.pieList.series[0].itemStyle = {
borderRadius: 5,
};
// 隐藏xy轴
this.pieList.xAxis = {
show: false,
};
this.pieList.yAxis = {
show: false,
};
// 绘制图表
myChart.setOption(this.pieList);
window.PieChart = myChart;
},
};
</script>
