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

Posted lmxhome

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts常用方法,饼图切换圆环中文字相关的知识,希望对你有一定的参考价值。

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

以上是关于echarts常用方法,饼图切换圆环中文字的主要内容,如果未能解决你的问题,请参考以下文章

ECharts常用图表 饼图

vue+ECharts组件封装及饼图实现圆环进度条

echarts 饼图 圆环线怎么做

31-Vue之ECharts-饼图

echarts怎么控制圆饼图的大小

解决 Echarts饼图文字过长重叠问题