这是一个没有套路的前端博主，热衷各种前端向的骚操作，经常想到哪就写到哪，如果有感兴趣的技术和前端效果可以留言～博主看到后会去代替大家踩坑的～
主页: oliver尹的主页
格言: 跌倒了爬起来就好～
一、前言
本文来自于实际大屏需求，由于走了半天弯路特意记录一下，主要实现的是在echarts中堆叠柱状图的 默认选中 以及 定时切换选中 效果；
二、效果图
大致效果图如下：
三、效果实现
切换的核心在于echarts官网提供的 dispatchAction 这个API方法（官网地址如下：https://echarts.apache.org/zh/api.html#action.highlight），这个方法在type项具有两个参数，分别是 highlight 和 showTip，这里利用的就是这两个参数，关于这两个参数的说明如下：
3.1 highlight
highlight的主要作用是将图形高亮，换句话说，在柱状图中这个设置可以让柱状图形处于高亮状态
// 如果要高亮系列： dispatchAction({ type: 'highlight', // 用 index 或 id 或 name 来指定系列。 // 可以使用数组指定多个系列。 seriesIndex?: number | number[], seriesId?: string | string[], seriesName?: string | string[], // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项 dataIndex?: number | number[], // 可选，数据项名称，在有 dataIndex 的时候忽略 name?: string | string[], });
具体高亮效果，效果：
这里的白色背景条就是高亮效果；
3.2 showTip
这个参数的作用是 主动显示tips，也就是上方图例中的白色小框
dispatchAction({ type: 'showTip', // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。 seriesIndex?: number, // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项 dataIndex?: number, // 可选，数据项名称，在有 dataIndex 的时候忽略 name?: string,, // 本次显示 tooltip 的位置。只在本次 action 中生效。 // 缺省则使用 option 中定义的 tooltip 位置。 position: number[] | string | Function, })
当执行这段代码后，可以指定图像的tips显示；
3.3 实现代码
知道了高亮和显示tips的api，那么接下来方便了
// 取消之前高亮的图形 chart.dispatchAction({ type: "downplay", seriesIndex: option.yAxis.data.length, dataIndex: app.currentIndex, }); // 计算下一个高亮的位置 app.currentIndex = app.currentIndex - 1 > -1 ? app.currentIndex - 1 : option.yAxis.data.length; // 执行高亮 chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: app.currentIndex, }); // 执行 chart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: app.currentIndex, });
这里注意的是，在执行高亮前，为了保险起见务必去取消上一次的高亮，这样确保执行高亮的时候结果是符合预期的；
3.4 整体代码
下面是完整代码，具体效果为本文第二章节的效果；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> html, body { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } .main { position: relative; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background-color: #333333; } </style> </head> <body> <div class="main" id="app"></div> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js"></script> <script> let chart = echarts.init(document.getElementById("app")); let option = { tooltip: { trigger: "axis", axisPointer: { // Use axis to trigger tooltip type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow' }, }, legend: {}, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, }, xAxis: { type: "value", }, yAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, series: [ { name: "Direct", type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, data: [320, 302, 301, 334, 390, 330, 320], }, { name: "Mail Ad", type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, data: [120, 132, 101, 134, 90, 230, 210], }, { name: "Affiliate Ad", type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, data: [220, 182, 191, 234, 290, 330, 310], }, ], }; chart.setOption(option); var app = { currentIndex: option.yAxis.data.length, }; setInterval(() => { // 取消之前高亮的图形 chart.dispatchAction({ type: "downplay", seriesIndex: option.yAxis.data.length, dataIndex: app.currentIndex, }); app.currentIndex = app.currentIndex - 1 > -1 ? app.currentIndex - 1 : option.yAxis.data.length; chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: app.currentIndex, }); chart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: app.currentIndex, }); }, 1000); </script> </body> </html>
四、小结
echarts的功能很强大，本文中的默认选中和定时切换主要借用的是 dispatchAction 这个API中的 highlight 和 showTip；
通过highlight 指定图形高亮，之后通过 **showTip 显示提示窗口，**最后通过setInterval执行定时切换完成了这个需求（当然，setInterval是有一定问题的，可以通过递归setTimeout解决）；
