cpdm_manage/src/components/BingChart.vue

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

<script>
import * as echarts from "echarts";
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);
    },
  },
  mounted() {
    window.addEventListener("resize", this.echartsAllSize);
  },
  destroyed() {
    console.log("报告页面销毁了");
    window.removeEventListener("resize", this.echartsAllSize);
  },
  methods: {
    echartsAllSize() {
      let flag = false;
      setTimeout(() => {
        flag = true;
        if ( flag) {
          //设置变化的大小
          console.log("大小变化了---------------------");
          let myChart = this.$echarts.init(document.getElementById(this.chartId));
          myChart.resize();
        }
      }, 1000);
      //大小自适应
      //查看当前页面是否显示
    },
    myPieEcharts(pieData) {
      let myChart = this.$echarts.init(document.getElementById(this.chartId));
      let option = {
        title: {
          text: ``,

          left: "center",
          top: "0px",
          textStyle: {
            fontSize: "20",
            color: "#000000",

            foontWeight: "600",
          },
        },
        // tooltip: {
        //   trigger: "item",

        // },

        series: [
          {
            name: ``,
            type: "pie",
            radius: "60%",
            label: {
              show: true,
              position: "outside", //将文字显示在行内 outside  inside
              textStyle: {
                fontSize: 16, //设置图内显示文字的大小
                color: "#000000", //设置饼状图文字的颜色
              },
            },
            // label: {
            //   show: true,
            //   position: "inner", //将文字显示在行内
            //   textStyle: {
            //     fontSize: 20, //设置图内显示文字的大小
            //     color: "#ffffff", //设置饼状图文字的颜色
            //   },
            // },
            data: [
              {
                value: pieData[0].value,
                name:
                  pieData[0].value + pieData[1].value == 0
                    ? "0%"
                    : parseInt(
                        (pieData[0].value / (pieData[0].value + pieData[1].value)) * 100
                      ) +
                      "%" +
                      pieData[0].name,
                itemStyle: { color: "#5470C6", fontSize: "20" },
              },
              {
                value: pieData[1].value,
                name:
                  pieData[0].value + pieData[1].value == 0
                    ? "0%"
                    : 100 -
                      parseInt(
                        (pieData[0].value / (pieData[0].value + pieData[1].value)) * 100
                      ) +
                      "%" +
                      pieData[1].name,
                itemStyle: { color: "#FFAE00", fontSize: "20" },
              },
            ],
          },
        ],
      };
      pieData && option && myChart.setOption(option);
      window.onresize = function () {
        console.log("111111111111饼状图大小变化了吗");
        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>