关于Echarts柱状图监听点击事件的实现方法
开发过程中，我们经常会碰到这样的需求：在柱状图上，点击某条柱形，调用相应的方法或跳转相应的界面
接下来就详细介绍如何实现柱状图的点击事件，其中chart是绘图对象
一、简单的点击事件
chart.on('click', function (params) {
console.log(params)
})这样就可以获得每条柱形所对应的数据
注意：此方法虽实现了点击，但是只限于点击柱形中有数据的部分，而对于没有数据的区域，点击无效。
二、升级版简单的点击事件
chart.getZr().on('click', params => {
let pointInPixel = [params.offsetX, params.offsetY]
if (chart.containPixel('grid', pointInPixel)) {
let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
console.log(xIndex)
} }
注意：此方法既实现了对柱形中有数据的部分点击也实现了对于没有数据的区域点击
其中，getZr()方法可以监听到整个画布的点击事件，zIndex是被点击的柱形的index若要实现获取id的效果，则需要拿到series的数组，再通过index拿到对应的数据对象
完整代码
const chartContainer = this.$refs.chartContainer;
// 初始化 ECharts 实例
const chart = echarts.init(chartContainer);
let option = {
backgroundColor: "#03213D",
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, 0)",
textStyle: {
color: "#FFF",
},
// axisPointer: {
// type: "shadow",
// label: {
// show: true,
// },
// },
},
grid: {
left: "10%",
top: "18%",
right: "5%",
bottom: "25%",
},
xAxis: {
data: this.xuexiao,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#163a5f",
width: 2,
},
},
axisTick: {
show: false, //隐藏X轴刻度
alignWithLabel: true,
},
axisLabel: {
show: true,
textStyle: {
color: "#BDD8FB", //X轴文字颜色
fontSize: 12,
},
interval: 0,
formatter: function (value) {
let ret = ""; //拼接加\n返回的类目项
let maxLength = 4; //每项显示文字个数
let valLength = value.length; //X轴类目项的文字个数
let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1) {
//如果类目项的文字大于5,
for (var i = 0; i < rowN; i++) {
let temp = ""; //每次截取的字符串
let start = i * maxLength; //开始截取的位置
let end = start + maxLength; //结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
} else {
return value;
}
},
},
},
yAxis: [
{
type: "value",
name: "",
max: 200,
nameTextStyle: {
color: "#BDD8FB",
fontSize: 12,
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.15)",
// type: 'dashed', // dotted 虚线
},
},
axisTick: {
show: false,
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#163a5f",
width: 1,
},
},
axisLabel: {
show: true,
textStyle: {
color: "#BDD8FB",
fontSize: 12,
},
},
},
{
type: "value",
name: "",
nameTextStyle: {
color: "#BDD8FB",
fontSize: 12,
},
splitLine: {
show: false,
lineStyle: {
width: 1,
color: "#CED2DB",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false, //隐藏X轴轴线
lineStyle: {
color: "#163a5f",
width: 2,
},
},
axisLabel: {
show: false,
textStyle: {
color: "#797A7F",
fontSize: 12,
},
},
},
],
series: [
{
name: "车辆出入次数",
type: "bar",
barWidth: 15,
itemStyle: {
// color: new graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "#00A2FF",
// },
// {
// offset: 1,
// color: "#00CCD2",
// },
// ]),
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: '#13D5FC' // 0% 处的颜色
},
{
offset: 1,
color: '#2059B8' // 100% 处的颜色
}
]
},
barBorderRadius: [20, 20, 20, 20],
},
label: {
show: true,
position: "top",
distance: 0,
color: "#1ACDDC",
formatter: "{c}" + "次",
},
data: this.nums,
},
{
// name: '背景',
type: "bar",
barWidth: "15px",
xAxisIndex: 0,
yAxisIndex: 1,
barGap: "-110%",
// data: [100, 100, 100, 100, 100, 100, 100], //背景阴影长度
itemStyle: {
normal: {
color: "rgba(255,255,255,0.039)",
barBorderRadius: [20, 20, 20, 20],
},
},
tooltip: {
show: false,
},
zlevel: 9,
},
],
};
chart.setOption(option);
chart.getZr().on('click', params => {
let pointInPixel = [params.offsetX, params.offsetY]
if (chart.containPixel('grid', pointInPixel)) {
let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
this.xuexiao.forEach((item, index) => {
if (index == xIndex) {
this.$router.push({path: "/gxgzxx/crjl", query: {name: item,sj:[this.query.beginTime,this.query.endTime] }})
}
})
} })