首页 前端知识 《echarts》echart柱状图实现默认选中和定时切换选中功能

《echarts》echart柱状图实现默认选中和定时切换选中功能

2024-03-20 11:03:39 前端知识 前端哥 135 691 我要收藏

这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~
主页: oliver尹的主页
格言: 跌倒了爬起来就好~

一、前言

本文来自于实际大屏需求,由于走了半天弯路特意记录一下,主要实现的是在echarts中堆叠柱状图的 默认选中 以及 定时切换选中 效果;

二、效果图

大致效果图如下:
May-09-2023 20-31-10.gif

三、效果实现

切换的核心在于echarts官网提供的 dispatchAction 这个API方法(官网地址如下:https://echarts.apache.org/zh/api.html#action.highlight),这个方法在type项具有两个参数,分别是 highlightshowTip,这里利用的就是这两个参数,关于这两个参数的说明如下:

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[],
});

具体高亮效果,效果:
image.png
这里的白色背景条就是高亮效果;

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中的 highlightshowTip
通过highlight 指定图形高亮,之后通过 **showTip 显示提示窗口,**最后通过setInterval执行定时切换完成了这个需求(当然,setInterval是有一定问题的,可以通过递归setTimeout解决);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3990.html
评论
发布的文章

JQuery操作DOM

2024-04-13 23:04:28

jQuery库

2024-04-13 23:04:28

【无标题】

2024-04-13 23:04:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!