lanju-front/src/views/dashboard/PieChart3.vue

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "230px",
    },
    chartData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      chart: null,
    };
  },

  watch: {
    chartData: {
      deep: true,
      handler(newValue, oldValue) {
        this.chart.dispose();
        this.chartData = newValue;
        this.initChart(); //值发生改变则渲染一次echarts
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      var ydata = [];
      var color = [
        "#8d7fec",
        "#5085f2",
        "#e75fc3",
        "#f87be2",
        "#f2719a",
        "#fca4bb",
        "#f59a8f",
        "#fdb301",
        "#57e7ec",
        "#cf9ef1",
      ];
      var xdata = [];
      if (this.chartData) {
        this.chartData.forEach((item) => {
          let a = {};
          a.name = item.productName;
          a.value = item.quantitySplit;
          xdata.push(item.productName);
          ydata.push(a);
        });
      }
      this.chart.setOption({
        // backgroundColor: "rgba(255,255,255,1)",
        color: color,
        legend: {
          orient: "vartical",
          x: "left",
          top: "0%",
          left: "32%",
          bottom: "0%",
          data: xdata,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 16,

          /*formatter:function(name){
	      var oa = option.series[0].data;
	      var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
	      for(var i = 0; i < option.series[0].data.length; i++){
              if(name==oa[i].name){
              	return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
              }
	      }
	    }*/

          formatter: function (name) {
            return "" + name;
          },
        },
        series: [
          {
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 2, //最小的扇区角度（0 ~ 360）
            radius: ["50%", "85%"],
            center: ["20%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 6,
              },
            },
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{text|{b}}\n{c} ({d}%)",
                rich: {
                  text: {
                    color: "#666",
                    fontSize: 14,
                    align: "center",
                    verticalAlign: "middle",
                    padding: 8,
                  },
                  value: {
                    color: "#8693F3",
                    fontSize: 20,
                    align: "center",
                    verticalAlign: "middle",
                  },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 24,
                },
              },
            },
            data: ydata,
          },
        ],
      });
      let dataCount1 = ydata.length;
      this.chart.on("mouseover", (e) => {
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
        // 根据当前option中data的length，遍历取消其他高亮
        for (let i = 0; i < dataCount1; i++) {
          if (i != e.dataIndex) {
            this.chart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: i,
            });
          }
        }
      });
      //鼠标移出后显示之前默认高亮的那块，其他取消高亮
      this.chart.on("mouseout", (e) => {
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
        if (e.dataIndex !== 0) {
          this.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        } else {
          this.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: 0,
          });
        }
      });
      setTimeout(() => {
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 1,
        });
      }, 500);
    },
  },
};
</script>