echarts pie餅狀圖綁定點擊事件


var valueData = [
                {value: 33,name: '診所'},
                {value: 29,name: '汽車服務相關'},
                {value: 27, name: '洗衣店'},
                {value: 26,name: '中介機構'},
                {value: 22,name: '汽車維修'}
            ];
            var nameData = ['診所', '汽車服務相關', '洗衣店', '中介機構', '汽車維修'];
            var colorData = ['#A769EB', '#f69846', '#f6d54a', '#45dbf7', '#5AF6DE', '#89F6DC'];

            let Option2 = {
                backgroundColor: 'rgba(0,0,0,0)',
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {d}% <br/> {c}"
                },
                legend: {
                    // orient: 'vertical',
                    icon: 'circle',
                    bottom: 20,
                    x: 'center',
                    y: 'top',
                    data: nameData,
                    textStyle: {
                        color: '#fff'
                    }
                    //data: ['診所', '汽車服務相關', '洗衣店', '中介機構', '汽車維修', '火車站', '人流指數', '日式簡餐/快餐', 'ATM', '超市']
                },
                series: [{
                    type: 'pie',
                    // radius: ['20%', '40%'],
                    center: ['50%', '50%'],
                    left:70,
                    right:70,
                    color: colorData,
                    data: valueData,
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 20,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        }
                    },
                    label: {
                        normal: {
                            formatter: '{c|{b}}\n{a|{d}}'+ '%',
                            rich: {
                                b: {
                                    fontSize: 12,
                                    color: '#12EABE',
                                    align: 'left',
                                    padding: 4
                                },
                                d: {
                                    
                                    fontSize: 12,
                                    align: 'left',
                                    padding: 2
                                },
                                c: {
                                    color: '#fff',
                                    fontSize: 12,
                                    align: 'left',
                                    padding: 2
                                }
                            }
                        }
                    }
                }]
            }
            var dom1 = document.getElementById("Box2");
            var myChart1 = echarts.init(dom1);
            let number = 0 //聲明一個變量稍后接扇區的dataIndex 
            myChart1.on('click', function(param) { //添加點擊事件
                console.log(param );
                myChart1.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活點擊區域高亮
                if (param.dataIndex !== number) { // 當鼠標點擊的時候 消除上一個扇區的高亮
                    myChart1.dispatchAction({ type: 'downplay', dataIndex: number });
                }
                number = param.dataIndex //接住當前扇區的dataIndex
            });
            myChart1.setOption(Option2)
            myChart1.dispatchAction({ type: 'highlight', dataIndex: 0 }); // 生成是默認第一條數據高亮


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM