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

<template>
  <el-row>
    <div id="index1" style="width:100%;height:100%;"></div>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["resData"],
  data() {
    return {};
  },
  watch: {
    resData() {
      this.getData();
    }
  },
  methods: {
    getData() {
      let chartDom = document.getElementById("index1");
      let myChart = echarts.init(chartDom);
      let data = this.resData.map(val => {
        return {
          name: val.deviceTypeS,
          value: val.deviceCount
        };
      });
      let total = 0;
      data.forEach(val => {
        total += val.value;
      });
      let option = {
        title: [
          {
            text: "{name|" + total + "}\n{val|设备总数}",
            top: "center",
            left: "center",
            textStyle: {
              rich: {
                name: {
                  fontSize: 25,
                  fontWeight: "normal",
                  color: "#37FF01"
                },
                val: {
                  fontSize: 14,
                  fontWeight: "bold",
                  color: "#02DDF2"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return (
              params.name +
              "：" +
              params.value +
              "<br>占比：" +
              params.percent.toFixed(2) +
              "%"
            );
          }
        },
        series: [
          {
            label: {
              normal: {
                show: true,
                formatter: " {b}：{c} "
              },
              emphasis: {
                show: true
              }
            },
            name: "访问来源",
            radius: ["45%", "60%"],
            type: "pie", // 设置图表类型为饼图
            // data: []
            data: data
          }
        ],
        color: ['#FF0087', '#00DDFF', '#37A2FF', '#FF5801', '#FFBF00']
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });

    },

  }
};
</script>

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