During the development process, we often encounter such needs: on a bar chart, click on a bar to call the corresponding method or jump to the corresponding interface.
Next, we will introduce in detail how to implement the click event of the histogram, where chart is the drawing object.
1. Simple click event
chart.on('click', function (params) {
console.log(params)
})In this way, you can get the data corresponding to each bar
Note: Although this method implements clicks, it is only limited to clicking on the part of the column with data, and clicks are invalid for areas without data.
2. Upgraded version of simple click event
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)
} }
Note: This method not only realizes clicking on the part with data in the column, but also realizes clicking on the area without data.
Among them, the getZr() method can monitor the click event of the entire canvas. zIndex is the index of the clicked column. If you want to achieve the effect of obtaining the ID, you need to get the array of the series, and then get the corresponding data object through the index.
Complete code
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] }})
}
})
} })