需求:
实现在时间横轴折线图中, 默认坐标轴指示器隐藏,点击图表区域后相应位置出现指示器并附有该点时间标签,同时将该点的所有数据传送给其它组件,5s之后指示器消失。
实现:
需要配置的属性: tooltip,xAxis.axisPointer , 主要通过xAxis.axisPointer.handle 属性实现指示器的显示与否。
tooltip: {
trigger: 'axis',
triggerOn: 'click',
snap: true,
showContent: true,
formatter: (params) => {
let fn = useDebounceFn(() => {
option.xAxis.axisPointer.label.show = true; // 显示指示标签
option.xAxis.axisPointer.handle.show = true; // 显示坐标轴指示器
setTimeout(() => {
option.xAxis.axisPointer.handle.show = false;
option.xAxis.axisPointer.label.show = true;
myChart.setOption(option, true); // 需设置setOption的第二个参数为true
}, 5000);
// 点击后执行函数
}, 200);
},
xAxis: {
axisPointer: {
lineStyle: {
color: '#7581BD',
width: 2,
},
label: {
show: false, // 点击后的指示标签
formatter: function (params) {
return formatToDateTime(params.value);
},
backgroundColor: '#7581BD',
},
handle: {
show: false, // 指示器是否显示
color: '#7581BD',
size: 0,
},
}
}