了解echarts的dispatchAction方法和getZr方法并实现轮播tooltips

dispatchAction方法可以用来手动触发ECharts支持的图表行为

这个方法接受一个包含特定属性的对象作为参数.

一、highlight 高亮指定的数据图形

dispatchAction({

type: 'highlight',
// 可选，系列 index，可以是一个数组指定多个系列
seriesIndex?: number|Array,
// 可选，系列名称，可以是一个数组指定多个系列
seriesName?: string|Array,
// 可选，数据的 index
dataIndex?: number,
// 可选，数据的 名称
name?: string
})

高亮特定数据

chartInstance.value.dispatchAction({
　　type: 'highlight',
　　seriesIndex: 0,
　　dataIndex: 1,
});

高亮提示框

chartInstance.value.dispatchAction({
　　type: 'showTip',
　　seriesIndex: 0,
　　dataIndex: 1,
});

 

hideTip 隐藏提示框

dispatchAction({
    type:'hideTip'
})

二、downplay 取消高亮指定的数据图形

dispatchAction({
type: 'downplay',
// 可选，系列 index，可以是一个数组指定多个系列
seriesIndex?: number|Array,
// 可选，系列名称，可以是一个数组指定多个系列
seriesName?: string|Array,
// 可选，数据的 index
dataIndex?: number,
// 可选，数据的 名称
name?: string
})

chartInstance.value.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
});

三、图例相关的行为，必须引入图例组件之后才能使用

选中图例

dispatchAction({
    type: 'legendSelect',
    // 图例名称
    name: string
})

取消选中图例

dispatchAction({
    type: 'legendUnSelect',
    // 图例名称
    name: string
})

切换图例的选中状态

dispatchAction({
    type: 'legendToggleSelect',
    // 图例名称
    name: string
})

控制图例的滚动，当legend.type是scroll的时候有效

dispatchAction({
    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})

四、数据区域缩放组件、视觉映射组件、时间轴组件、工具栏组件相关行为

dispatchAction({
type: 'dataZoom',
// 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
dataZoomIndex: number,
// 开始位置的百分比，0 - 100
start: number,
// 结束位置的百分比，0 - 100
end: number,
// 开始位置的数值
startValue: number,
// 结束位置的数值
endValue: number
})

切换时间轴的播放状态

dispatchAction({
    type: 'timelinePlayChange',
    // 播放状态，true 为自动播放
    playState: boolean
})

数据区域缩放

myChart.dispatchAction({
    type: 'dataZoom', // 数据区域缩放行为
    dataZoomIndex: 0, // 数据区域缩放组件索引
    start: 0, // 开始位置的百分比
    end: 100 // 结束位置的百分比
});

设置当前的时间点

dispatchAction({
    type: 'timelineChange',
    // 时间点的 index
    currentIndex: number
})

闭或启动toolbox中的dataZoom的刷选状态

myChart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'dataZoomSelect',
    // 启动或关闭
    dataZoomSelectActive: true
});

五、饼图、地图组件、地图图表、关系图、区域选择相关行为
1.饼图

　　选中指定的饼图扇形（pieSelect）

　　取消选中指定的饼图扇形（pieUnSelect）

　　切换指定的选中的饼图扇形状态（pieToggleSelect）

2.地图组件

选中指定的地图区域（geoSelect）
取消选中的指定地图区域（geoUnSelect）
切换指定的地图区域的选中状态（geoToggleSelect）
3.地图图表组件
同地图组件类似，也有三个行为，如下：

　　选中指定的地图区域（mapSelect）
　　取消选中的指定地图区域（mapUnSelect）
　　切换指定的地图区域的选中状态（mapToggleSelect）
4.关系图
关系图行为使用，也得引入关系图

　　focusNodeAdjacency 将指定的节点以及其周边相邻的节点高亮
　　unFocusNodeAdjacency 将指定的节点以及其周边相邻的节点取消高亮
5.区域选择相关的行为

　　brush：触发此action可设置或删除chart中的选框
　　takeGlobalCursor：刷选模式的开关。使用此Action可将当前鼠标变为刷选状态

getZr() 是 ECharts 中的一个方法

用于获取 ZRender 实例。ZRender 是 ECharts 的底层依赖库，官方文档中没有详细说明，因此在未来的版本中可能会发生变化，负责图形的渲染和事件处理。

通过 getZr() 可以监听各种事件，如 click、mousedown 等，这对于需要处理复杂交互的场景非常有用。

使用getZr监听点击事件示例：

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
tooltip: { show: true, trigger: 'item' },
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: { type: 'value' },
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' }
}
]
};

myChart.setOption(option);

myChart.getZr().on('mousedown', (params) => {
console.log(params);
const pointInPixel = [params.offsetX, params.offsetY];
if (myChart.containPixel('grid', pointInPixel)) {
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
alert('你点击区域的数据为：' + option.series[0].data[xIndex]);
}
});

 

使用dispatchAction方法和getZr方法实现轮播tooltip

let timers = ref(null);
let pos = ref(-1);
// 自动轮播定时器
const initTimer = () => {
const categoryLength = props.option?.xAxis?.data.length;
if (timers.value) {
clearInterval(timers.value);
}
timers.value = setInterval(() => {
if(chartInstance.value) {
chartInstance.value.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});

pos.value += 1;
if (pos.value > categoryLength - 1) {
pos.value = 0;
}
chartInstance.value.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: pos.value,
});

chartInstance.value.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: pos.value,
});
}

}, 2000);
};

const autoShowTip = () => {
initTimer();
};
const stopShowTip = () => {
clearInterval(timers.value);
};
const tooptipsShow = () => {
// 鼠标悬浮上去时自动轮播停止
let zRender = chartInstance.value.getZr();
chartInstance.value.on('mouseover', function () {
stopShowTip();
});
chartInstance.value.on('mouseout', function () {
autoShowTip();
});
zRender.on('mousemove', () => {
stopShowTip();
});
zRender.on('globalout', () => {
autoShowTip();
});
autoShowTip();
}

 

 

参考博主：https://blog.csdn.net/wgf1997/article/details/124815817

 　　　　  https://www.cnblogs.com/grow-up-up/p/16792325.html