echarts官网：Examples - Apache ECharts

echartsFn.ts 把echarts函数封装成一个文件

import * as echarts from "echarts";

const seriesData = [
  {
      "value": 12,
      "name": "过流报警"
  },
  {
      "value": 102,
      "name": "高温报警"
  },
  {
      "value": 1,
      "name": "缺相报警"
  },
  {
      "value": 3,
      "name": "分闸"
  },
  {
      "value": 1,
      "name": "断电分闸"
  },
  {
      "value": 248,
      "name": "机械闭锁"
  },
  {
      "value": 97,
      "name": "漏电闭锁"
  },
  {
      "value": 4,
      "name": "过载闭锁"
  },
  {
      "value": 5,
      "name": "短路闭锁"
  }
]

// 报警类型统计
const initVisualizingContentLeftBottom = async (dom: HTMLElement | null, state: any) => {
  const myChart = dom && echarts.init(dom);

  const option = {
    legend: {
      selectedMode: false, //禁止鼠标移到legend弹出饼图中间的文字
      x: "0",
      icon: "circle",
      textStyle: {
        color: "#fff",
        fontSize: "14px",
      },
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 5,
    },
    series: [
      {
        center: ["center", "65%"], // 这个属性调整图像的位置！！！！！
        type: "pie",
        radius: ["45%", "60%"],
        itemStyle: {
          borderRadius: 15, // 设置圆环的圆角弧度
        },
        emphasis: {
          // 设置高亮时显示标签
          label: {
            show: true,
          },
          scale: true, // 设置高亮时放大图形
          scaleSize: 15,
        },
        label: {
          // 设置图形标签样式
          color: "#fff", //图例文字颜色
          show: false, // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠
          position: "center",
          // 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器
          formatter: "{d_style|{d}}{per_style|%}\n\n{b_style|{b}}",
          // 为标签内容指定样式，只能设置series-pie.label支持的样式
          rich: {
            d_style: {
              fontSize: 40,
            },
            per_style: {
              fontSize: 30,
            },
            b_style: {
              fontSize: 20,
            },
          },
        },
        data: seriesData,
      },
    ],
  };

  myChart && myChart.setOption(option);

  let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
  if (state.changePieInterval) clearInterval(state.changePieInterval); //关闭
  state.changePieInterval = myChart && setInterval(selectPie, 1000); // 设置自动切换高亮图形的定时器

  function highlightPie() {
    // 取消所有高亮并高亮当前图形
    // 遍历饼图数据，取消所有图形的高亮效果
    for (var idx in option.series[0].data)
      myChart &&
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: idx,
        });
    // 高亮当前图形
    myChart &&
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: currentIndex,
      });
  }

  myChart &&
    myChart.on("mouseover", (params: any) => {
      // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
      clearInterval(state.changePieInterval);
      currentIndex = params.dataIndex;
      highlightPie();
    });

  myChart &&
    myChart.on("mouseout", (params: any) => {
      // 用户鼠标移出时，重新开始自动切换
      if (state.changePieInterval) clearInterval(state.changePieInterval);
      state.changePieInterval = setInterval(selectPie, 1000);
    });

  function selectPie() {
    // 高亮效果切换到下一个图形
    var dataLen = option.series[0].data.length;
    currentIndex = (currentIndex + 1) % dataLen;
    highlightPie();
  }
};

export {
  initVisualizingContentLeftBottom,
};

页面文件

template代码

<div ref="visualizingContentLeftBottom" style="height: 100%;"></div>

script代码

import { toRefs, reactive, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
import { initVisualizingContentLeftBottom } from "./echartsFn";

export default defineComponent({
	setup() {
		// 页面卸载时
		onUnmounted(() => {
			clearInterval(state.changePieInterval);
			state.changePieInterval = null
		});
		// 页面加载时
		onMounted(() => {
			initVisualizingContentLeftBottom(proxy.$refs.visualizingContentLeftBottom, state)
		});

		const { proxy }: any = getCurrentInstance();
		const state = reactive({
			changePieInterval: null as any,
		});
    }
});

效果图