我们的柱状图分布不均匀，有些柱高可能会很小，如果通过myChart.on('click',function(){})来促发事件，可能在点击的时候不好操作，我们可以对在整个对serie的阴影部分绑定点击事件。如图所示：
那么，能如何实现点击灰色区域触发绑定的事件呢
本文总结了三种实现方法，介绍如下：
一：利用echarts提供的新API convertFromPixel完美解决。（最好的办法）
myChart.getZr().on("click", (params) => {
const pointInPixel = [params.offsetX, params.offsetY];
if (myChart.containPixel("grid", pointInPixel)) {
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX,params.offsetY,])[0];
/*事件处理代码书写位置*/
let vo = this.baseDataList[xIndex];
if (this.barChartSelectPath.indexOf(vo.id) > -1) {
return;
} else {
this.barChartSelectPath.push(vo.id);
}
this.getAllDataOfCamera(vo.id);
}
});
二：series配置项
let baseSer = [],
max = Math.max.apply(Math, chartData.series);
chartData.series.forEach(() => {
baseSer.push(max);
});
series配置项如下：
series: [
{
// For shadow
type: "bar",
itemStyle: {
color: "rgba(0,0,0,0)",
},
barGap: "-100%",
barCategoryGap: "40%",
data: baseSer,
animation: false,
},
{
label: labelOption,
barWidth: 20,
name: "接入数",
type: "bar",
itemStyle: {
barBorderRadius: [20, 20, 0, 0],
emphasis: {
/*text: pieChartDataTotal + 10000000,*/
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#00a1f4" },
{ offset: 1, color: "#062645" },
]),
},
data: chartData.series, // [320, 332, 301, 334, 500, 330, 320, 286]
},
]