echarts常用方法，饼图切换圆环中文字

Posted 2021-10-24 lmxhome

在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，如果对你有帮助，点个赞给点鼓励吧~