1.首页需要设置legend
legend: { data: ["积极", "负面"], selectedMode: false, show: false }
let index = 0; var myCharts = this.$echarts.init(document.getElementById(this.id)); var option = { title: { text: this.title, left: "center", bottom: "0%", textStyle: { color: "#fff" } }, legend: { data: ["积极", "负面"], selectedMode: false, show: false }, tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)" }, series: [ { name: "", type: "pie", radius: ["50%", "80%"], center: ["50%", "40%"], avoidLabelOverlap: false, // selectedMode: "single", label: { normal: { show: false, position: "center", formatter: "{d}%", textStyle: { color: "#fff" } }, emphasis: { show: true, textStyle: { fontSize: "16", fontWeight: "bold" } } }, itemStyle: { normal: { // color: "#c23531", color: params => { //自定义颜色 var colorList = ["#60bce0", "#274170"]; return colorList[params.dataIndex]; }, borderWidth: 1, borderColor: "#fff" } }, labelLine: { normal: { show: false } }, data: this.pieData } ] }; myCharts.setOption(option); myCharts.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: 0 }); //设置默认选中高亮部分 myCharts.on("mouseover", function(e) { if (e.dataIndex != index) { myCharts.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: index }); } }); myCharts.on("mouseout", function(e) { index = e.dataIndex; myCharts.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex }); });