主要先设置 emphasis.scale= true 开启鼠标移入高亮动画，利用dispatchAction方法设置默认高亮组 块， 再检测鼠标的mouseover时间，当检测到鼠标悬停事件，取消默认选中高亮。
实现效果如下：
set_veryImportantChart(get_data) {//除了非常重要的数据let unnormal_total = get_data.dataSourAbNormalTotal - get_data.count;// 判断下划线长度let underlin = this.underline_fun(get_data.count);this.veryImportantChart.clear();this.veryImportantChart.setOption({tooltip: {trigger: "item",},//标题title: {text: get_data.title,left: "center",top: "5%",textStyle: {fontSize: 18,color: "white",fontWeight: "bolder",height: 20,lineHeight: 22.5,},backgroundColor: "#0070D6", //背景padding: [7, 15, 7, 15],show: true, //是否显示},// 中心文本graphic: [{//环形图中间添加可点击数字type: "text", //通过不同top值可以设置上下显示left: "center",top: "55%",style: {text: `${get_data.count}`,textAlign: "center",fill: "#0A75D7", //文字的颜色width: 30,height: 30,fontSize: 22,fontWeight: 500,},},{//环形图中间添加可点击数字type: "text", //通过不同top值可以设置上下显示left: "center",top: "54%",style: {text: `${underlin}`,textAlign: "center",fill: "#0A75D7", //文字的颜色fontSize: 26,fontWeight: 800,},},{//环形图中间添加文字type: "text", //通过不同top值可以设置上下显示left: "center",top: "64%",// 表示不响应事件。silent: true,style: {text: "存在异常",textAlign: "center",fill: "#484848", //文字的颜色fontSize: 18,fontWeight: 600,},},],series: [{type: "pie",width: "100%",height: "100%",center: ["50%", "60%"], //圆心radius: ["60%", "85%"], //内外半径color: ["#FFC000", "#3986FE"], // 圆环图的颜色avoidLabelOverlap: false,// 饼图图形上的文本标签label: {show: false,position: "center", // 标签的位置。'outside'饼图扇区外侧formatter: "{a|存在异常}", // 标签内容rich: {a: {color: "red",lineHeight: 10,padding: [10, 0, 0, 0],},},},itemStyle: {borderRadius: 1, //边框圆角borderColor: "#fff",borderWidth: 3,},emphasis: {scale: true, //鼠标移入变大label: {show: false,fontSize: "20",fontWeight: "bold",},},labelLine: {show: false,},data: [{value: get_data.count,name: get_data.title,},{value: unnormal_total, name: "其他" },],},],});//设置默认选中高亮部分this.veryImportantChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 0,});//检测鼠标移入后this.veryImportantChart.on("mouseover", (e) => {if (e.dataIndex == 0) {return;} else {//当检测到鼠标悬停事件，取消默认选中高亮this.veryImportantChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: 0,});}});//检测鼠标移出后显示之前默认高亮的那块this.veryImportantChart.on("mouseout", () => {this.veryImportantChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 0,});});// 页面大小发生改变时Echarts也跟着发生改变window.addEventListener("resize", () => {this.veryImportantChart.resize();});},
