现在有一个需求是当我点击ehcart的x轴或者y轴的时候,希望能够获取到这个s轴和y轴的数据
我在网上搜索了一个代码
myChart = this.$echarts.init(document.getElementById("myChart"))
myChart.setOption(this.option)
// 给整个画布添加点击事件
myChart.getZr().on('click', function (param) {
const pointInPixel = [param.offsetX, param.offsetY]
console.log('pointInPixel', pointInPixel)
// 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引 值,借助于索引值的获取到其它的信息
// 转换X轴坐标
let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
// 转换Y轴坐标
let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel);
// x轴数据的索引值
console.log('pointInGrid', pointInGrid2)
// 所点击点的X轴坐标点所在X轴data的下标
let xIndex = pointInGrid[0];
// 所点击点的Y轴坐标点数值
let yIndex = pointInGrid2[1];
// 使用getOption() 获取图表的option
let op = myChart.getOption();
//获取到x轴的索引值和option之后,我们就可以获取我们需要的任意数据。
// 点击点的X轴对应坐标的名称
var time = op.xAxis[0].data[xIndex];
// 点击点的series -- data对应的值
var value = op.series[0].data[xIndex];
console.log('val', time)
});
我现在想加到我的小程序里面,但是这个点击事件没有触发
import * as echarts from '../../components/ec-canvas/echarts';
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
var chart;
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
canvas.setChart(chart);
chart.setOption(option)
chart.on('click',function(){
console.log('oo');
})
return chart;
}
移出去也没有成功,反而报错
import * as echarts from '../../components/ec-canvas/echarts';
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
var chart;
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
canvas.setChart(chart);
chart.setOption(option)
return chart;
}
chart.on('click',function(){
console.log('oo');
})
你搜的这个也不是小程序的写法。是要实现什么功能?
$echarts.init(document.getElementById("myChart"))