hb_sis_zhfx/src/views/sampleDatabase/analysis/pieCharts.vue

<template>
  <div class="precisionEcharts" :style="style" :id="id"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    warningTimeList: {
      type: Array,
    },
    id: Object,
    width: {
      type: String,
      default: "600px",
    },
    height: {
      type: String,
      default: "250px",
    },
  },
  data() {
    return {
      xindex: [],
    };
  },
  computed: {
    style() {
      return `width: ${this.width}; height: ${this.height};`;
    },
  },
  mounted() {
    this.deal();
    this.$nextTick(() => {
      this.initChart();
    });
  },
  updated() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    deal() {
      for (let index = 0; index < 35; index++) {
        this.xindex.push(index);
      }
    },
    initChart() {
      let seriesData = [];
      this.warningTimeList.forEach((item) => {
        let obj = {
          value: item.num,
          name: item.name,
        };
        seriesData.push(obj);
      });
      let chartDom = document.getElementById(this.id);
      let myChart = echarts.init(chartDom);
      let option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
          },
        },
        series: [
          {
            name: "报警次数",
            type: "pie",
            radius: ["30%", "60%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#000",
              borderWidth: 2,
            },
            label: {
              show: true,
              normal: {
                show: true,
                textStyle: {
                  fontSize: "20",
                  color: "#ffffff",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "25",
                  color: "#ffffff",
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: seriesData,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    Compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
  },
  watch: {
    warningTimeList: {
      handler(newValue, oldValue) {
        this.initChart();
      },
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
// .precisionEcharts {
//   width: 600px;
//   height: 250px;
// }
</style>