<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);
? ? // 標(biāo)題
? ? this.pieList.title = { text: "華東數(shù)據(jù)" };
? ? // 觸摸提示 提示框浮層內(nèi)容格式器formatter
? ? // 餅圖: {a}（系列名稱），（數(shù)據(jù)項(xiàng)名稱），{c}（數(shù)值）, u0z1t8os（百分比）
? ? this.pieList.tooltip = {formatter: '{a}<br />: {c} (u0z1t8os%)'};
? ? // 圖例位置
? ? this.pieList.legend.top = "10%";
? ? this.pieList.legend.left = "0";
? ? // 修改圖表類型
? ? this.pieList.series[0].type = "pie";
? ? // 把圖例除了華東都刪除
? ? this.pieList.legend.data.splice(1);
? ? // 拿到時(shí)間和數(shù)值，整合數(shù)據(jù)格式，展示線對(duì)應(yīng)的名字
? ? 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;
? ? // 設(shè)置圓心、半徑大小
? ? this.pieList.series[0].radius = ["10%", "50%"];
? ? // 設(shè)置餅圖上下左右位置
? ? this.pieList.series[0].center = ["50%", "60%"];
? ? // 形狀玫瑰
? ? this.pieList.series[0].roseType = "area";
? ? // 設(shè)置圓角
? ? 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>
