Echarts 柱状图在微信小程序中绑定单列点击事件
1、在 Echarts 配置项中设置 “series” 中的 “data” 数据项中添加 “emphasis” 属性，并在该属性中添加 “focus” 属性。
option = {
…
series: [{
name: ‘柱状图’,
type: ‘bar’,
data: [{
value: 100,
emphasis: {
focus: ‘self’
}
}, {
value: 200,
emphasis: {
focus: ‘self’
}
}, {
value: 300,
emphasis: {
focus: ‘self’
}
}]
}]
…
}
2、在小程序中使用 Echarts 组件并绑定 “echange” 事件。在事件处理函数中获取点击事件的参数，从参数中可以获取到所点击的柱状图的数据项信息，通过判断数据项信息可以实现单列点击事件的处理。
<ec-canvas id=”mychart-dom-bar” canvas-id=”mychart-bar” ec=”{{ ec }}” bind:tap=”echange”></ec-canvas>
Page({
data: {
ec: {
onInit: initChart
}
},
echange: function (e) {
var that = this;
that.selectComponent(‘#mychart-dom-bar’).getChart().then(function (chart) {
var option = chart.getOption();
var seriesData = option.series[0].data;
var dataIndex = e.currentTarget.dataset.index;
console.log(‘点击的数据：’, seriesData[dataIndex]);
// 在这里实现单列点击事件的处理逻辑
})
}
})
注意：在小程序中获取 Echarts 实例需要使用 Echarts 组件的 selectComponent() 方法和 getChart() 方法。同时，在 bind:tap 事件中获取到的 event 事件参数对象中，需要使用 currentTarget.dataset.index 获取点击事件的数据项的索引。
Echarts 柱状图在uniapp中绑定单列点击事件
此处使用ec-canvas组件
1、在 Echarts 配置项中，设置 “series” 中的 “data” 数据项，并在该数据项中添加 “emphasis” 属性，并在该属性中添加 “focus” 属性。
option = {
…
series: [{
name: ‘柱状图’,
type: ‘bar’,
data: [{
value: 100,
emphasis: {
focus: ‘self’
}
}, {
value: 200,
emphasis: {
focus: ‘self’
}
}, {
value: 300,
emphasis: {
focus: ‘self’
}
}]
}]
…
}
2、在 Uniapp 页面中，使用 Echarts 组件，并绑定 “echange” 事件。在事件处理函数中获取点击事件的参数，从参数中可以获取到所点击的柱状图的数据项信息，通过判断数据项信息可以实现单列点击事件的处理。
<ec-canvas id=”mychart-dom-bar” canvas-id=”mychart-bar” :options=”option” @echange=”echange”></ec-canvas>
import * as echarts from ‘../../components/ec-canvas/echarts’;
export default {
data() {
return {
ec: {
onInit: initChart
},
option: {}
}
},
methods: {
echange: function (e) {
var that = this;
that.$refs[‘mychart-dom-bar’].getEchartsInstance().then(function (chart) {
var option = chart.getOption();
var seriesData = option.series[0].data;
var dataIndex = e.dataIndex;
console.log(‘点击的数据：’, seriesData[dataIndex]);
// 在这里实现单列点击事件的处理逻辑
})
}
}
}
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
chart.setOption(option);
return chart;
}
注意：在 Uniapp 中获取 Echarts 实例需要使用 Echarts 组件的 $refs 属性和 getEchartsInstance() 方法。
同时，在 @echange 事件中获取到的参数对象中，需要使用 e.dataIndex 获取点击事件的数据项的索引。