echarts点击事件使用

最新推荐文章于 2024-04-29 17:01:02 发布

xiaoming_0208

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量3k

点赞数 1

分类专栏：前端文章标签： echarts javascript ecmascript

原文链接：https://zhuanlan.zhihu.com/p/588249196

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

echarts可以通过点击事件获取每项的值：myChart.on('click', function (param) { } // myChart为自定义变量：var myChart = echarts.init(document.getElementById('echartBox'));

可以通过param获取如下：

//param参数包含的内容有： 
//param.name：X轴的值 
//param.data：Y轴的值 
//param.value：Y轴的值 
//param.type：点击事件均为click 
//param.seriesName：legend的名称 
//param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
//param.dataIndex：数值序列（X轴上当前点是第几个点）
 //alert(param.seriesName);  //legend的名称

也可以在option的series里面自定义参数，然后通过option.series[param.seriesIndex].barIds[param.dataIndex])获取自定义的参数(barIds为自定义的参数)，如下

option = {
    series:{
       name:'蒸发量',
       type:'bar',
 //添加了barIds参数（自定义的）
       barIds: ['1月1','2月2','3月3','4月4','5月5','6月6','7月7','8月8','9月9','10月10','11月11','12月12'], 
       data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    }
}
myChart.on('click', function (param) { 
//获取自定义变量barIds的值,barIds要和option的series里自定义的一样
　　alert(option.series[param.seriesIndex].barIds[param.dataIndex])

});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>点击echarts圆柱体事件</title>
        <script type="text/javascript" src="js/echarts.min.js"></script>
    </head>
    <body>
        <div id="echartBox" style=" 800px;height: 400px;margin: 50px auto;border: 1px solid #ccc;"></div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var myChart = echarts.init(document.getElementById('echartBox'));
            option = {
                title : {
                    text: '某地区蒸发量',
                    subtext: '纯属虚构'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'蒸发量',
                        type:'bar',
                        barIds: ['1月1','2月2','3月3','4月4','5月5','6月6','7月7','8月8','9月9','10月10','11月11','12月12'],  //添加了rawdate参数（自定义的）
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            myChart.setOption(option, true);
            myChart.on('click', function (param) {  
                //param参数包含的内容有： 
                //param.name：X轴的值 
                //param.data：Y轴的值 
                //param.value：Y轴的值 
                //param.type：点击事件均为click 
                //param.seriesName：legend的名称 
                //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
                //param.dataIndex：数值序列（X轴上当前点是第几个点）
                //alert(param.seriesName);  //legend的名称
                alert(param.name);  //X轴的值
                alert(option.series[param.seriesIndex].barIds[param.dataIndex]);//获取自定义的值
            });
        }
    </script>
</html>