最近在使用百度的echarts写股票的K线图,刚开始用遇到大堆的问题,光是为了解决这些问题都花了我一整天时间。两个论坛都发帖了,没人理。还是靠自己吧。
以下代码只写了关键片段,
//什么在option外面的变量
var clickIndex;
option = { //配置信息
tooltip: { //提示框
//提示触发类型:不触发
trigger: 'none',
},
//formatter回调函数,
formatter: val => {
//获取当前阴影部分点击的索引值并
clickIndex = val[0].dataIndex
},
}
//生成图框内容
myChart.setOption(option);
//加上getZr()即为阴影点击事件
myChart.getZr().on('click', function(params) {
//得到准确索引值,不会随着位置的变化而变化!
console.log(clickIndex);
}
网上还有另外一种方法,但是得到的索引值会随着位置的变化而变化!!!!有点坑,适合用在静态图
myChart.getZr().on('click', function(params) {
// 获取到鼠标点击位置:
var pointInPixel = [params.offsetX, params.offsetY];
// 使用containPixel API判断点击位置是否在显示图形区域,下面的例子过滤了绘制图形的网格外的点击事件,比如X、Y轴lable、空白位置等的点击事件。
if (myChart.containPixel('grid', pointInPixel)) {
使用API convertFromPixel获取点击位置对应的x轴数据的索引值,我的实现是借助于索引值的,当然可以获取到其它的信息,详细请查看文档。
var xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
let op = myChart.getOption()
// 获取当前点击位置要的数据
var xData = op.series[0].data[xIndex]
console.log(xData);
});
最后还是要吐槽一下,不知道是自己笨还是echarts官方文档写的不够简明。
努力总会解决bug的。加油吧