ECharts柱状图添加点击事件

参考：

https://zhuanlan.zhihu.com/p/33050579

https://blog.csdn.net/sophia_xiaoma/article/details/78055947

http://www.jb51.net/article/125820.htm

https://www.cnblogs.com/zhzhair-coding/p/6953982.html?utm_source=itdadao&utm_medium=referral

 

 

对于ECharts生成的图表数据，series区域默认已添加了开启了点击方法，但是需要自己的定义函数。

X轴和Y轴默认未开启点击事件，需要开启。

triggerEvent:true

还需要在echart实例上绑定事件。

myChart. on ( 'click' , function (params) {
    console.log(params);
});

本示例实现了以下功能：

1.点击柱状图时会刷新数据，但不刷新页面。

2.数据部分可以通过ajax函数生成。

3.点击刷新更新柱状图内容。

 

 // 指定图表的配置项和数据 var option = {
            title: {
                text: 'ECharts 入门示例' },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                triggerEvent:true,
                axisTick: {
                    alignWithLabel: true //坐标值是否在刻度中间  }
                
            },
            yAxis: {triggerEvent:true},
            series: {
                name: '销量',
                type: 'bar', //data: [n1, n2, n3, n4, n5, n6],  data : seriesdata,
                itemStyle: {  
                    normal: {  
                        color: function(params) {
                 var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];   

return colorList[params.dataIndex]        }, label: { show: true, position: 'top' } } } } }; // 使用刚指定的配置项和数据显示图表。  myChart.setOption(option); myChart.on('click', function (params) {  refresh(); });