deviceManager/src/views/components/fireInternetInfo/index1.vue

<template>
  <el-row>
    <div id="index1" ref="echartD" style="width:100%;height:30vh;"></div>
  </el-row>
</template>
<script>
import * as echarts from "echarts";
export default {
  // props: ["resData"],
  props: {
    dataMap: { type: Number, default: () => 0 },
    dataNumber: { type: Number, default: () => 0 },
    color: { type: String, default: () => "#468EFD" },
    size: { type: Number, default: () => 20 },
    tick: { type: Boolean, default: () => true },
    with: { type: Number, default: () => 200 },
  },
  data() {
    return {};
  },
  watch: {
    dataMap(val) {
      this.getData(val);
    },
    dataNumber(val) {
      this.getData(val);
    },
  },
  mounted() {
    this.getData();
  },
  methods: {

    getData() {
      let data = [
        {
          name:"已处置",
          value:this.dataMap.toFixed(2)
        },
        {
          name:"未处置",
          value:(1-this.dataMap).toFixed(2)
        }
      ]
      echarts.init(this.$refs.echartD).setOption({
        color: [
          this.color,
          '#FF0087',
        ],
        title: {
          text: (this.dataMap * 100).toFixed(2) + '%',
          y:'center',
          x:'center',
          textStyle: {
            fontSize: this.size,
            fontWeight: "700",
            color:this.color,
            fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return (
              params.name +
              "：" +
              params.value +
              "<br>占比：" +
              (params.value * 100).toFixed(2) +
              "%"
            );
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '60%'],
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            data: data
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });

    },

  }
};
</script>

<style lang="scss" scoped></style>