标签：事件 join .com UNC normal label getopt return editor
在echarts的饼图应用时，遇到过一个需求就是鼠标移到半环上可以切换环中的文字，同时支持legend点击事件。误区是，鼠标移动到环上重新渲染option，以切换内部的文字。重新渲染option的做法，不能保存你原有的legend状态。
找到一个办法就是，只渲染环内部文字的label。
主要代码如下：
option = { series : [ { ... type:‘pie‘, ... label: { show: true, position: ‘outside‘, formatter:function(params){ let nm = params.name,per = Number(params.percent).toFixed(2) ; return [`{a|${nm}}\n`,`{b|${per}%}`] }, rich: { a: { color:‘#fff‘, fontSize:14, lineHeight: 20 }, b: { color:‘yellow‘, fontSize:14, foneWeight:‘bold‘ }, } }, ... }]
myChart.on(‘mouseover‘, (params) => { currName = params.name; let op = myChart.getOption(); if(params.seriesIndex === 0){ let _label = { normal:{ show: true, position: ‘center‘, formatter: [ `{a|${params.name}}`, `{b|${params.percent + "%"}}` ].join(‘\n‘), rich: { a: { color:‘#fff‘, fontSize: 18, lineHeight: 30 }, b: { color:‘yellow‘, fontSize: 20, foneWeight:‘bold‘, textShadowBlur: 20, textShadowColor: ‘yellow‘ }, } } } op.series[2].label = _label; myChart.setOption(op,true) } })
提供一个自己写的demo链接：https://gallery.echartsjs.com/editor.html?c=xdysA_7PCd，如果对你有帮助，点个赞给点鼓励吧~
标签：事件 join .com UNC normal label getopt return editor
原文地址：https://www.cnblogs.com/lmxHome/p/10768906.html
