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,});}
});

效果图