饼图

实现效果

具体代码

<template>
  <div :style="`height:${height}`">
    <div :style="`width:${width};height:${height}`" ref="barChart"></div>
  </div>
</template>
<script>
export default {
  props: {
    height: {
      //y轴名称
      type: String,
      default: "100%",
    },
    width: {
      //y轴名称
      type: String,
      default: "100%",
    },
    colorArr: {
      type: Array,
      default: () => [
        "rgba(7, 119, 246,",
        "rgba(7, 191, 246, ",
        "rgba(27, 255, 209, ",
        "rgba(255, 213, 84, ",
        "rgba(253, 117, 29, ",
        "rgba(188, 255, 237, ",
      ],
    },
    chartData: {
      type: Object,
    },
    bottomColor: {
      type: String,
      default: "rgba(0, 37, 78, 1)",
    },
    ifLegend: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      myChart: null,
      xData: ["区域1", "区域2", "区域3区域3", "区域4", "区域5", "区域6"],
      seriesData: [],
      data: [1, 2, 3, 4, 5],
      maxData: [],
      lineData: [],
      legendData: [],
    };
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        console.log(newVal);
        //chartData数据格式
        //[{name:'name1',value:0},{name:'name2',value:0}]
        this.$nextTick(() => {
          if (newVal) {
            this.drawChart();
          }
        });
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      //this.drawChart();
      //this.initData();
    });
  },
  methods: {
    //找出数据中的最大值
    getMax() {
      let arr = [];
      //console.log(this.chartData);
      this.chartData.series.map((item) => {
        arr = arr.concat(item.data);
      });
      let max = Math.max(...arr);
      if (max < 1) {
        max = max + 0.1;
      } else if (1 <= max < 10) {
        max = max + 1;
      } else if (max >= 10) {
        max = max + 10;
      } else if (max >= 100) {
        max = max + 100;
      }
      return max;
    },
    //先组装数据
    initData() {
      this.drawChart();
    },
    drawChart() {
      if (this.myChart) {
        this.myChart.dispose && this.myChart.dispose();
      }
      console.log(this.chartData);
      let colorList = this.colorArr;
      var rich = {
        white: {
          color: "#ddd",
          align: "center",
          padding: [5, 0],
        },
      };
      var placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      };
      var data = [];
      for (var i = 0; i < this.chartData.data.length; i++) {
        data.push(
          {
            value: this.chartData.data[i].value,
            name: this.chartData.data[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 60,
                color: this.colorArr[i] + "1)",
                borderColor: this.colorArr[i] + "1)",
                shadowColor: this.colorArr[i] + "0.6)",
              },
            },
          },
          {
            value: 4,
            name: "",
            itemStyle: placeHolderStyle,
          }
        );
      }
      var seriesObj = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: ["45%", "55%"],
          center: ["24%", "50%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
                position: "outside",
                color: "#ddd",
              },
              labelLine: {
                show: false,
              },
            },
          },
          data: data,
        },
        {
          type: "pie",
          // zlevel: 2,
          silent: true,
          radius: ["90%", "89%"],
          center: ["30%", "50%"],
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: this._pie3(),
        },
      ];
      let chartArr = this.chartData.data;
      var total = 0; //各科正确率总和
      chartArr.forEach(function (value, index, array) {
        total += value.value;
      });
      //圆环中间的字
      seriesObj.push({
        name: "Indicator",
        type: "gauge",
        radius: "-50%",
        center: ["24%", "50%"], // 需和type: 'pie'中的center一致
        pointer: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          formatter: "{a|" + total + "}{c|件}",
          offsetCenter: [-1, 10],
          color: "#FFFFFF",
          fontSize: 16,
          rich: {
            a: {
              fontSize: 22,
              color: "#FFFFFF",
            },

            c: {
              fontSize: 12,
              color: "#ffffff",
              padding: [6, 0, 0, 3],
            },
          },
        },
        data: [
          {
            value: 7,
            name: "总数",
            title: {
              show: true,
              color: "#FFFFFF",
              fontSize: 14,
              offsetCenter: [-1, -12],
            },
          },
        ],
      });
      const option = {
        backgroundColor: "#04243E",
        tooltip: {
          show: true,
        },
        toolbox: {
          show: false,
        },
        // color:colorArr2,
        series: seriesObj,
      };
      this.myChart = this.$echarts.init(this.$refs.barChart);
      this.myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    _pie3() {
      let dataArr = [];
      for (var i = 0; i < 150; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "rgba(17, 85, 104, 0.2)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
                shadowBlur: 30,
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
                shadowBlur: 30,
              },
            },
          });
        }
      }
      return dataArr;
    },
  },
  beforeDeatroy() {
    //销毁图表实例，避免内存溢出
    this.myChart.dispose && this.myChart.dispose();
  },
};
</script>
<style scoped lang="scss"></style>