Echart系列2·自定义echart交互点击事件】

1、echart点击事件:

以下关键代码

myChart.setOption(option);
myChart.off('click');// 在渲染点击事件之前先清除点击事件,一定要加上否则会重复加载先前的点击事件
myChart.on("click", function (params) {
	// 1.在这里可以拿到数据
	// 2.可以调用自定义的交互事件
	console.log('获取点击的数据',params);
})

2、echart 纵轴设置最大、最小值:

1、当y轴为百分比时,希望设置最大值为100
2、当y轴整体区间范围大于500时,希望设置最小值从500开始
3、 自适应:根据数据范围,自适应匹配最大、最小值

// 1、当y轴为百分比时,希望设置最大值为100
yAxis: [{
     type: "value",
     max: '100' 
}]
// 2、当y轴整体区间范围大于500时,希望设置最小值从500开始
yAxis: [{
     type: "value",
     min: '500'
}]
// 3、 自适应:根据数据范围,自适应匹配最大、最小值
yAxis: [{
     type: "value",
     max: 'dataMax',
     min: 'dataMin'
}]

3、设置图形初始化高亮、初始化显示tooltip信息悬浮框:

以下关键代码

myChart.dispatchAction({
      type: "showTip", // 初始化显示tooltip
	  // type: "highlight", // 初始化高亮
	  seriesIndex: 0, // 系列的 index
	  dataIndex: 0, // 数据的 index
});

4、寄语:

抬头望望天
月亮在笑

低头看看地
浪花在跳

这个世界
我们多么渺小

只要努力
就会心比天高

你可能感兴趣的:(交互,javascript,vue.js,elementui,echarts)