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 }); // 生成是默认第一条数据高亮
    
  • 相关阅读:
    微信支付-微信公众号支付,微信H5支付,微信APP支付,微信扫码支付
    微信公众号支付开发当前URL未注册解决办法
    程序员头像
    jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
    MySQL大表优化方案 Mysql的row_format(fixed与dynamic)
    PHP 测试杂项
    【转】MySQL的学习--触发器
    MYSQL PROCEDURE 测试用例
    CSS好看的按钮
    表格可在线编辑效果
  • 原文地址:https://www.cnblogs.com/changx/p/13539953.html
Copyright © 2011-2022 走看看