echarts 饼图点击事件

最新推荐文章于 2024-09-09 14:08:32 发布

weixin_30699741

最新推荐文章于 2024-09-09 14:08:32 发布

阅读量751

点赞数

原文链接：http://www.cnblogs.com/wcnwcn/p/11170279.html

版权

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();
        }