饼图
data() {
return {
pieList: {},
};
},
props: {
reportsList: {
type: Object,
饼图默认数据
default: () => {
return {
title: {
text: "饼图",
},
tooltip: {},
xAxis: {
show: false,
/* data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], */
},
yAxis: { show: false },
series: [
{
name: "销量",
type: "pie",
radius: "50%",
data: [
{ name: "衬衫", value: 5 },
{ name: "羊毛衫", value: 20 },
{ name: "雪纺衫", value: 36 },
{ name: "裤子", value: 10 },
{ name: "高跟鞋", value: 10 },
{ name: "袜子", value: 20 },
],
},
],
};
},
},
},
mounted() {
var myChart = echarts.init(this.$refs.main);
this.pieList = JSON.parse(JSON.stringify(this.reportsList));
饼图数据修改修改
this.pieList.title = { text: "华东饼图数据" };
this.pieList.legend.top = "10%";
this.pieList.legend.left = "0%";
this.pieList.series.forEach((r) => {
r.type = "pie";
});
拿到时间集合和数据用来展示饼图的name值和value值
let nameList = this.pieList.xAxis[0].data;
let valueList = this.pieList.series[0].data;
let newArr = [];
nameList.forEach((v, i) => {
let obj = {
name: v,
value: valueList[i],
};
newArr.push(obj);
});
console.log(newArr);
让饼图的x轴和y轴隐藏
this.pieList.xAxis = {
show: false,
};
this.pieList.yAxis = {
show: false,
};
this.pieList.series.splice(1);
this.pieList.series[0].data = newArr;
this.pieList.series[0].radius = ["20%", "60%"];
this.pieList.series[0].center = ["50%", "60%"];
this.pieList.series[0].roseType = "radius";
'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
'area' 所有扇区圆心角相同，仅通过半径展现数据大小。不在视图上百分比显示区域
/* this.pieList.series[0].label = { show: false }; */
this.pieList.series[0].itemStyle = {
borderRadius: 3,
};
this.pieList.legend.data.splice(1);
饼图提示数据的显示
饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
this.pieList.tooltip = {
formatter: "{a} <br> {b} : {c} {d}%",
};
myChart.setOption(this.pieList);
window.PieChart = myChart;
},
};
