餅圖
data() {
? ? return {
? ? ? pieList: {},
? ? };
? },
? props: {
? ? reportsList: {
? ? ? type: Object,
餅圖默認(rèn)數(shù)據(jù)
? ? ? 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));
餅圖數(shù)據(jù)修改修改
? ? this.pieList.title = { text: "華東餅圖數(shù)據(jù)" };
? ? this.pieList.legend.top = "10%";
? ? this.pieList.legend.left = "0%";
? ? this.pieList.series.forEach((r) => {
? ? ? r.type = "pie";
? ? });
拿到時(shí)間集合和數(shù)據(jù)用來(lái)展示餅圖的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'?扇區(qū)圓心角展現(xiàn)數(shù)據(jù)的百分比，半徑展現(xiàn)數(shù)據(jù)的大小。
'area'?所有扇區(qū)圓心角相同，僅通過(guò)半徑展現(xiàn)數(shù)據(jù)大小。不在視圖上百分比顯示區(qū)域
? ? /* this.pieList.series[0].label = { show: false }; */
? ? this.pieList.series[0].itemStyle = {
? ? ? borderRadius: 3,
? ? };
? ? this.pieList.legend.data.splice(1);
餅圖提示數(shù)據(jù)的顯示
餅圖、儀表盤、漏斗圖:?{a}（系列名稱），（數(shù)據(jù)項(xiàng)名稱），{c}（數(shù)值）,?u0z1t8os（百分比）
? ? this.pieList.tooltip = {
? ? ? formatter: "{a} <br> : {c} u0z1t8os%",
? ? };
? ? myChart.setOption(this.pieList);
? ? window.PieChart = myChart;
? },
};
