关于javascript:echarts饼图自定义formatter

1. 实现成果

2. 实现原理

echarts 官网：
https://echarts.apache.org/zh/index.html

3. 残缺代码

https://gitee.com/susuhhhhhh/responsive-web-page

4. 次要代码

var myChart = echarts.init(document.getElementById('main3'));
var option = { 
        
        title: {text: '这是一个 echarts 图表'},
        tooltip: {
            trigger: 'item',
            position: function (point, params, dom, rect, size) {
            
              let x = 0; // x 坐标地位
              let y = 0; // y 坐标地位
            
              let pointX = point[0];
              let pointY = point[1];
              let boxWidth = size.contentSize[0];
              let boxHeight = size.contentSize[1];
              if (boxWidth > pointX) {x = 5;} else {x = pointX - boxWidth;}
              if (boxHeight > pointY) {y = 5;} else {y = pointY - boxHeight;}
              return [x, y];
            }
        },
        legend: {
            x : '70%',
            y : '25%',
            orient: 'vertical',
            align: 'right',
            // top: '5%',
            // left: 'center'
            formatter: function(name){return name.length>5?name.substr(0,5)+"...":name;
          },
            tooltip:{show:true}
        },
        series: [
            {
                name: '拜访起源',
                type: 'pie',
                center : ['35%', '50%'],
                radius: ['10%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#ff5500',
                    borderWidth: 2,
                    // normal: {
                    //     show: true,
                    //     formatter: '{b}: {c}({d}%)' // 自定义显示格局 (b:name, c:value, d: 百分比)
                    // }
                    normal: {
                      label: {
                        show: true,
                        position: 'inner',
                        formatter: "{d}%"
                      },
                      labelLine: {show: true}
                    },
                     emphasis: {
                      shadowBlur: 20,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(30, 144, 255，0.5)',
                      label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                    
                },
                labelLine: {show: false},
                data: [{value: 1048, name: '搜索引擎搜索引擎搜索引擎搜索引擎'},
                    {value: 735, name: '间接拜访间接拜访间接拜访间接拜访'},
                    {value: 580, name: '邮件营销邮件营销邮件营销邮件营销'},
                    {value: 484, name: '联盟广告联盟广告联盟广告联盟广告'},
                    {value: 300, name: '视频广告视频广告视频广告'}
                ]
            }
        ]
    };
        
myChart.setOption(option);
window.addEventListener('resize', function () {myChart.resize()
 })