cpdm_manage/src/components/PieChart2.vue

<template>
  <div class="pie-chart-content">
    <div ref="myPieChart" :id="chartId" style="width: 100%; height: 200px"></div>
  </div>
</template>

<script>
export default {
  name: "pieChart",
  components: {},
  props: {
    options: {
      type: Array,
      default: function () {
        return [];
      },
    },
    chartId: {
      type: String,
      default: "",
    },
    chartName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      color: ["#FCEF9A", "#D54039", "#56743E", "#FF917C"],
      pieData: [],
    };
  },
  // mounted() {
  //   this.myPieEcharts(this.options);
  // },
  computed: {},
  watch: {
    options() {
      this.myPieEcharts(this.options);
    },
  },
  methods: {
    myPieEcharts(pieData) {
      console.log("pieData", pieData);
      let myChart = this.$echarts.init(document.getElementById(this.chartId));
      console.log(myChart);
      //配置图表
      let option = {
        title: {
          text: this.chartName,
          subtext: "百分比",
          left: "center",
          top: "60%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          // top: "38%",
          // bottom:0
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "40%",
            center: ["50%", "40%"],
            // data: [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ],
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      pieData && option && myChart.setOption(option);

      window.onresize = function () {
        myChart.resize();
      };
    },
    pieDataHandle(param) {
      this.pieData = [];

      // param.groupData.map((item,index) => {
      //
      //   this.lineData.push({
      //     type: 'line',
      //     name: item.name,
      //     data: item.value,
      //   });
      //
      // });
      //
      // this.myLineEcharts(param.category,this.lineData);
    },
  },
};
</script>

<style scoped>
.pie-chart-content {
  width: 100%;
  height: 100%;
}
</style>