echarts餅狀圖環形中間動態文字

餅狀圖中間默認文字，當鼠標移入餅狀圖后，顯示對應的名稱和值，用到鼠標移入事件

為了判斷鼠標是否移出餅狀圖，在餅狀圖外圍又加了一個白色的外圈，與周邊的背景色一致，相當於隱藏的圓，75%-90%，下面代碼中的 series[1]

示例放到餅狀圖的右邊，當示例過多會自動成多列

參考地址：https://www.cnblogs.com/lmxHome/p/10768906.html

 

let currName = "";
let myChart = echarts.getInstanceByDom(document.getElementById('chart-panel'));
//console.log(myChart);
myChart.on('mouseover', (params) => {
    currName = params.name;
console.log(params)
    let op = myChart.getOption();
    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:'blue',
                    fontSize: 20,
                    foneWeight:'bold',
                },
                
            }
        }  
    }
    if(params.seriesIndex === 1){
        _label.normal.formatter = ['zhiliang'].join('\n')
    }
    op.series[0].label = _label;
    myChart.setOption(op,true)
})

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    color : [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            
            label: {
              normal:{
                    show: true,
                    position: 'center',
                    
                    formatter: [
                        'zhiliang'
                    ].join('\n'),
                    rich: {
                        a: {
                            color:'#fff',
                            fontSize: 18,
                            lineHeight: 30
                        },
                        b: {
                            color:'yellow',
                            fontSize: 20,
                            foneWeight:'bold',
                            textShadowBlur: 20,
                            textShadowColor: 'yellow'
                        },
                        
                    }
                }  
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {value: 335, name: '直接訪問',color:"#cccccc"},
                {value: 310, name: '郵件營銷'},
                {value: 234, name: '聯盟廣告'},
                {value: 135, name: '視頻廣告'},
                {value: 1548, name: '搜索引擎'}
            ]
        },
        {
            name: '邊框1',
            type: 'pie',
            hoverAnimation:false,
            radius:['75%', '90%'],
        
            labelLine:{
              normal:{
                  show: false
              }  
            },
            itemStyle:{
                normal:{
                    borderWidth:1,
                    borderColor:"#ffffff" ,
                    opacity:0
                }
            },
            data: [
                {
                    value: 100,
                    tooltip:{
                        show:false
                    }
                }
            ]
        },
    ]
};