ECharts柱状图添加点击事件
参考:
对于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: ["衬衫","⽺⽑衫","雪纺衫","裤⼦","⾼跟鞋","袜⼦"],setoption
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); ('click', function (params) { refresh(); });
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论