Echarts饼图

<template>
  <div id="leftEcharts1" class="echarts"></div>
</template>
<script>
import * as echarts from "echarts";
import { ajaxVmAreaPie } from "@/api/home";
export default {
  data() {
    return {
      Time1: null,
      dataArr: [
        { name: "名称", value: 68 },
        { name: "名称2", value: 38 },
        { name: "名称3", value: 28 }
      ],
      datasCopy: ""
    };
  },
  beforeDestroy() {
    clearInterval(this.Time1);
  },
  mounted() {
    this.echartsFun();
    this.Time1 = setInterval(() => {
      this.echartsFun();
    }, 60000);
  },
  methods: {
    async echartsFun() {
      // level 2省，4市，8区
      // await ajaxVmAreaPie({ level: 2 }).then(res => {
      //   console.log(res.data);
      //   res.data.name.forEach((v, k) => {
      //     this.dataArr.push({ name: v, value: res.data.value[k] });
      //   });
      // });
      let colorArr = ["#32C5FF", "#5AD8A6", "#7E5CF7", "#F6BD16", "#E8684A"];
      const myChart = echarts.init(document.getElementById("leftEcharts1"));
      const option = {
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            avoidLabelOverlap: true,
            radius: [15, 80],
            center: ["50%", "50%"],
            roseType: "area",
            // roseType: 'radius',
            itemStyle: {
              // borderRadius: 0
              // color: '#c23531',
              shadowBlur: 40,
              shadowColor: "rgba(0, 0, 0, 0.5)"
              // borderWidth: 1,
              // borderJoin: round
            },
            label: {
              // color: '#a8d5ff',
              fontSize: "14px",
              margin: 5,
              formatter: function(data) {
                return (
                  "{color" +
                  data.dataIndex +
                  "|" +
                  data.name +
                  ": " +
                  data.value +
                  " - " +
                  +data.percent +
                  "%}"
                );
              },
              rich: {
                color0: {
                  color: colorArr[0]
                },
                color1: {
                  color: colorArr[1]
                },
                color2: {
                  color: colorArr[2]
                },
                color3: {
                  color: colorArr[3]
                },
                color4: {
                  color: colorArr[4]
                }
              }
            },
            labelLine: {
              normal: {
                length: 15,
                length2: 30
              }
            },
            color: colorArr,
            data: this.dataArr
          }
        ]
      };
      myChart.setOption(option, true); // true无数据时更新试图
    }
  }
};
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>