echarts pie endless intermediate dynamic text

Default text intermediate pie chart, pie chart when the mouse moved, to display the corresponding name and value, use the mouse events into

To determine whether the mouse out of the pie chart, pie charts at the periphery but also added a circle invisible, 1px wide, the following code series [1]

Exemplary pie chart on the right place, too much sample is automatically when a plurality of rows

Reference Address: 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'] the Join ( '\ n-'. ) 
    } 
    op.series [ 0] = .label - label; 
    myChart.setOption (OP, to true ) 
}) 

Option = { 
    ToolTip: { 
        Trigger: ' Item ' , 
        Formatter: ' {A} a {B}: {C} ({D}%) ' 
    }, 
    Legend: { 
        Orient: ' Vertical ' , 
        right: 10 , 
        Top: 20 is , 
        bottom: 20 is , 
        the Data: [ 'direct access', 'email marketing', 'affiliate advertising''Video ads,' 'Search Engine']
    },
    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: to false 
                } 
            }, 
            Data: [ 
                {value: 335, name: "direct access", Color: "# CCCCCC" }, 
                {value: 310, name: 'email marketing' }, 
                {value: 234, name: 'affiliate advertising' }, 
                {value: 135, name: 'video ad' }, 
                {value: 1548, name: 'search engine' } 
            ] 
        },
        {
            name:  "frame 1 ',
            type: 'pie',
            hoverAnimation:false,
            radius:['75%', '75%'],
        
            labelLine:{
              normal:{
                  show: false
              }  
            },
            itemStyle:{
                normal:{
                    borderWidth:1,
                    borderColor:"#ffffff" ,
                    opacity:0
                }
            },
            data: [
                {
                    value: 100,
                    tooltip:{
                        show:false
                    }
                }
            ]
        },
    ]
};