百度echartsjs环形图实现点击收缩联动。适合手机端交互

之前公司做汽车零件的对应财务数据统计，于是乎就有了下面这个图。

image.png

echarts的引入方式就不说了，可查看文档。下面是配置参数

 myChart.on('click', function (params) {
            console.log(params.name); 
            var names=params.name
            funbs(names); //回调可以自定义扩展联动效果
        });
      
        var colorList = [
        '#c23531', '#2f4554', '#61a0a8',
        '#d48265', '#91c7ae','#749f83',
        '#ca8622', '#bda29a','#6e7074',
        '#546570', '#c4ccd3'
    ];
        
        originalData = [
            {value: 20, names: "雨刮"}, 
            {value: 40, names: '汽油'}, 
            {value: 20, names: '音响'},
            {value: 10, names: '火花塞'},
            {value: 10, names: '天窗'} 
        ];
        echarts.util.each(originalData, function (item, index) {
            item.itemStyle = {
                normal: {color: colorList[index]}
            };
        });

        var data = [];
        var legendData = [];
        resetOption();
    function resetOption() {
        data.length = 0;
        legendData.length = 0;
        echarts.util.each(originalData, function (item, index) {
            data.push({
                value: item.value, 
                name: item.names,  //获取数组 里面的值names
                itemStyle: {
                    normal: {color: item.itemStyle.normal.color}
                }
            });
            legendData.push(item.name);
        });
        
        option = {
        series: [{
                hoverAnimation: false,    //设置饼图默认的展开样式
                radius: [110, 190],    
                name: 'pie', 
                type: 'pie',
                selectedMode: 'single',
                selectedOffset:66,   //选中是扇区偏移量
                clockwise: true,
//              renderAsImage:"<%=basePath%>/img/login_bg.jpg",
                startAngle:90,
                label: {
                normal: {
                    textStyle: {
                        fontSize:18,
                        color: '#333'
                    }
                }
            },
                labelLine: {
                    
                     radius: [40, 80],   
                    normal: {
                        lineStyle: {
                            color: '#333',
                           
                        }
                    }
               }, 
               data: data
            }] 
        };  
       myChart.setOption(option, true);
    }

在线编辑连接：https://gallery.echartsjs.com/editor.html?c=xHy7uK2MZx
手机端效果参考：

image.png

以上是学习过程中，汇总的一份总结，如有不对，请指出，别忘记点个赞👍~~转发请注明链接