解决
tooltip: {trigger: "item",confine: true, // 配置这个选项formatter: "{b} : {c}个（{d}%）",backgroundColor: "rgba(0,16,47,0.88)",fontSize: 16,borderColor: "rgba(0, 170, 255)",textStyle: {color: "#F0F5FF",},},完整示例
<template><div id="pie" class="pieBox" />
</template>
<script>
export default {name: "PieEcharts",props: ["autoPlay", "showLabel", "pieData", "safeTypeCount"],data() {return {myChart: "",option: {},echartTimer: "",};},methods: {showTipsInterval() {if (!this.autoPlay) {return}var that = this;this.echartTimer = setInterval(function () {var index = Math.round(Math.random() * that.pieData.y.length);if (index === 0) {index = 1;}that.myChart.dispatchAction({type: "showTip", // 提示框seriesIndex: 0,dataIndex: index, // 第 lightIndex 柱子高亮});}, 1000);},handleMouseOver() {// 鼠标移入时关闭定时器clearInterval(this.echartTimer);},handleMouseOut() {// 鼠标移出时重新打开定时器this.showTipsInterval();},},mounted() {var pie = [];// console.log('pie',this.pieData,this.pieData.x);this.pieData.x.map((item, index) => {pie.push({ value: this.pieData.y[index], name: item });});var giftImageUrl = "/img/cockpit/bgpie.png";this.option = {color: ["rgba(3, 113, 230, .8)","rgba(90, 52, 220, .8)","rgba(232, 156, 0, .8)","rgba(63, 235, 195, .8)","rgba(242, 59, 3, .8)","rgba(10, 174, 227, .8)","rgba(179, 201, 239, .8)",],tooltip: {trigger: "item",// formatter: "{b} : {c} <br/> {d}% ",confine: true,formatter: "{b} : {c}个（{d}%）",backgroundColor: "rgba(0,16,47,0.88)",fontSize: 16,borderColor: "rgba(0, 170, 255)",textStyle: {color: "#F0F5FF",},},graphic: [{elements: [{type: "image",style: {image: giftImageUrl,width: 100,height: 100,},left: "center",top: "center",},// {// type: "text",// left: "center",// top: "42%",// style: {// text: this.safeTypeCount, // 显示总数量// fontSize: 20,// fontWeight: 500,// fill: "#86fcfd",// },// },{type: "text",left: "center",top: "44%",style: {text: "测站\n分类", // 显示总数量fontSize: 12,fill: "#fff",},},],},],series: [{name: "",type: "pie",radius: ["50%", "60%"],avoidLabelOverlap: false,emphasis: {label: {show: true,fontSize: "16",fontWeight: "bold",},},label: {// formatter: "{hr|} {b}\n {c}（{d}%）",formatter: `{hr|} {b}\n {c}个`,show: this.showLabel,position: "outside",color: "#F0F5FF",rich: {// 圆点位置大小配置hr: {// auto自定义backgroundColor: "auto",borderRadius: 50,width: 10,height: 10,lineHeight: 16,},},},labelLine: {show: false,},itemStyle: {// 此配置normal: {borderWidth: 2,borderColor: "#04151F",},emphasis: {borderWidth: 0,shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},data: pie,},{radius: ["48%", "33%"],center: ["50%", "50%"],type: "pie",label: {normal: {show: false,},emphasis: {show: false,},},labelLine: {normal: {show: false,},emphasis: {show: false,},},animation: false,tooltip: {show: false,},data: [{value: 1,itemStyle: {color: "rgba(4, 20, 30,0.5)",},},],zlevel: 999,}, //内边框背景],};this.myChart = this.$echarts.init(document.getElementById("pie")); // 图标初始化this.myChart.setOption(this.option); // 渲染页面this.showTipsInterval();// 监听鼠标移入事件this.myChart.getZr().on("mousemove", this.handleMouseOver);// 监听鼠标移出事件this.myChart.getZr().on("mouseout", this.handleMouseOut);// 随着屏幕大小调节图表window.addEventListener("resize", () => {this.myChart.resize();});},beforeDestroy() {this.myChart.clear();if (this.echartTimer) {clearInterval(this.echartTimer); // 关闭}},
};
</script><style scoped>
.pieBox {width: 100%;height: 100%;
}
</style>