zoukankan      html  css  js  c++  java
  • echarts 饼图 点击事件

    var option = {
                tooltip: {
                    show: false
                },
                backgroundColor: '#0e1d3c',
                series: [
    
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle:{
                            normal: {
                                //每个饼状图颜色设置
                                color: function(params) {
                                    var colorList = color;
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: function (data) {
                                    return data.name ? '{gray|' + data.name + '}{green|家}' : '';
                                },
    
                                rich: {
                                    gray: {
                                        color: 'white',
                                        fontSize: 20
                                    },
                                    green: {
                                        color: 'white',
                                        fontSize: 12
                                    }
                                }
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
    
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: param.num, name: ''},
                            {value: 100 - param.num, name: 100 - param.num},
                        ]
                    }
                ]
            };
            var myChart = echarts.init(param.dom, 'dark', {
                renderer: 'canvas'
            });
            myChart.setOption(option);
    
            圆柱图上添加点击事件
            myChart.on("click", pieConsole);
            function pieConsole(param) {
                //     获取data长度
                alert(option.series[0].data.length);
                //      获取地N个data的值
                //   alert(option.series[0].data[i]);
                //     获取series中param.dataIndex事件对应的值
                alert(param.value);
                alert(param.name);
                alert(option.series[param.seriesIndex].data[param.dataIndex].value);
                alert(option.series[param.seriesIndex].data[param.dataIndex].name);
                //   clickFunc(param.dataIndex);//执行点击效果,触发相应js函数
                //param具体包含的方法见 https://blog.csdn.net/allenjay11/article/details/76033232
    
                //刷新页面
                // location.reload();
                // window.location.reload();
            }
  • 相关阅读:
    Windows 8.1 序列化与反序列化
    window store app 附件读取
    Window 8.1 计时器功能及图片切换
    c#多层嵌套Json
    isNotNull与isNotEmpty的区别
    商务用语
    国家气象局三天天气WebService接口
    WebServise
    EF架构基础代码
    接口定义
  • 原文地址:https://www.cnblogs.com/wcnwcn/p/11170279.html
Copyright © 2011-2022 走看看