zoukankan      html  css  js  c++  java
  • 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',
                                     2
                                }
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c|{b}}
    {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 = null //声明一个变量稍后接扇区的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 }); // 生成是默认第一条数据高亮
    
  • 相关阅读:
    Python 模块,数据类型,元组
    Python条件循环判断
    Python简介
    File对象的基本操作学习
    File对象的基本操作学习
    sublime学习心得
    sublime学习心得
    IO学习
    IO学习
    Emacs学习
  • 原文地址:https://www.cnblogs.com/changx/p/13539953.html
Copyright © 2011-2022 走看看