预期效果：提示框显示时，相应的x坐标月份高亮（蓝色），同时提示框显示。
在这里插入图片描述
实现流程：
1.设置一个变量axisValue用于接收选中x值，当横轴值等于选中的axisValue时，设置蓝色
axisLabel: {
show: true,
textStyle: {
fontSize: 10, //更改坐标轴文字大小
fontFamily: "PingFangSC-Regular",
color: function (value, index) {
return _this.axisValue !== "" && _this.axisValue === value
? "#32AAFF"
: "#666666";
},
},
interval: 0,
},
代码片段截图：
代码片段截图
2.设置chartsCurrentData用于接收tooltip显示时的charts信息。
tooltip: {
trigger: "axis",
formatter: function (params) {
_this.chartsCurrentData = params[0];
}
// 其他代码信息.....
}
代码片段截图：
代码片段截图
3.点击时需要拿到chartsCurrentData的值，同时需要把对应横坐标值给axisValue，并且相应月份高亮显示，提示框不消失。
myChartId.getZr().on("click", (params) => {
// 拿到当前坐标位置
const pointInPixel = [ params.offsetX, params.offsetY ];
// 点击空的地方不执行逻辑
if (myChartId.containPixel("grid", pointInPixel)) {
console.log("拿到当前点击节点的索引", _this.chartsCurrentData);
const {name, dataIndex, seriesIndex} = _this.chartsCurrentData
_this.axisValue = name;
// 重新加载折线图
myChartId.dispatchAction({
type: "restore",
});
// 重新显示弹框位置
myChartId.dispatchAction({
type: "showTip",
seriesIndex: seriesIndex,
dataIndex: dataIndex,
});
}
});
其实我想说的是，Echarts还可以通过dispatchAction来触发action。又多了解到一种解决问题的方法，特此记录一下。
大家想了解，可以查看官网api: https://echarts.apache.org/zh/api.html#action.tooltip.showTip
