echarts自动滚动(无缝衔接,划入停止,划出滚动,鼠标滚动)

bug咋没了啊

已于 2024-01-16 10:14:11 修改

阅读量1.1k

点赞数 10

分类专栏：方法文章标签： echarts 前端 javascript

于 2023-12-07 11:35:51 首次发布

本文链接：https://blog.csdn.net/weixin_46382390/article/details/134851280

版权

方法专栏收录该内容

15 篇文章 0 订阅

订阅专栏

echarts柱状图自动滚动效果+无缝衔接滚动+鼠标划入停止+鼠标滚动+鼠标划出从最新位置滚动

效果

在这里插入图片描述

demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <li>无缝滚动</li>
        <li>鼠标划入暂停</li>
        <li>鼠标滚轮滚动</li>
    </div>
    <div id="chatDom" style="width: 500px; height: 500px; background-color: #525659;"></div>
</body>

</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
<script>
    //数据
    const list = [
        {
            label: '设备1',
            chatData: [
                { label: '2016', value: 1 },
                { label: '2017', value: 2 },
                { label: '2018', value: 3 },
                { label: '2019', value: 4 },
                { label: '2020', value: 5 },
                { label: '2021', value: 6 },
                { label: '2022', value: 7 },
                { label: '2023', value: 8 },
            ]
        },
        {
            label: '设备2',
            chatData: [
                { label: '2016', value: 2 },
                { label: '2017', value: 3 },
                { label: '2018', value: 4 },
                { label: '2019', value: 5 },
                { label: '2020', value: 6 },
                { label: '2021', value: 7 },
                { label: '2022', value: 8 },
                { label: '2023', value: 9 },
            ]
        },
        {
            label: '设备3',
            chatData: [
                { label: '2016', value: 3 },
                { label: '2017', value: 4 },
                { label: '2018', value: 5 },
                { label: '2019', value: 6 },
                { label: '2020', value: 7 },
                { label: '2021', value: 8 },
                { label: '2022', value: 9 },
                { label: '2023', value: 10 },
            ]
        },
        {
            label: '设备4',
            chatData: [
                { label: '2016', value: 4 },
                { label: '2017', value: 5 },
                { label: '2018', value: 6 },
                { label: '2019', value: 7 },
                { label: '2020', value: 8 },
                { label: '2021', value: 9 },
                { label: '2022', value: 10 },
                { label: '2023', value: 11 },
            ]
        },
    ];
    //可视窗口范围的结束数值(一次性展示几个) 从0开始
    const dataZoomEndValue = 6;

    //截取滚动条数以切换动画的方式实现无缝滚动
    if (list.length && list[0].chatData?.length > dataZoomEndValue + 1) {
        list.forEach((item) => {
            item.chatData = item.chatData.concat(
                item.chatData.slice(0, dataZoomEndValue + 1)
            );
        });
    }
    //数据整合
    let chatObj = list.reduce((x, y, z) => {
        if (!x.legendData) {
            x.legendData = [];
        }
        if (!x.series) {
            x.series = [];
        }
        if (!x.xAxisData) {
            x.xAxisData = [];
        }
        if (y.chatData.length) {
            x.xAxisData = y.chatData.map((item) => item.label);
        }
        x.legendData.push(y.label);
        x.series.push({
            name: y.label,
            type: "bar",
            smooth: true,
            symbol: "none",
            stack: "total",
            label: {
                show: false,
            },
            emphasis: {
                focus: "series",
            },
            data: y.chatData.map((item) => item.value),
            barMaxWidth: 10,
            animation: true,
        });
        return x;
    }, {});
    chatObj.dataZoomEndValue = dataZoomEndValue;
    const chartDom = document.getElementById("chatDom");
    if (chartDom) {
        const myChart = echarts.init(chartDom);
        const option = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            legend: {
                type: "scroll",
                top: "2%",
                right: "5%",
                left: "5%",
                data: chatObj.legendData,
                textStyle: {
                    color: "#FFF",
                    fontFamily: "youshebiaotihei",
                },
                itemGap: 20,
                formatter: function (labelName) {
                    return labelName.length > 10
                        ? labelName.slice(0, 10) + "..."
                        : labelName;
                },
            },
            grid: {
                top: "12%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: "value",
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                        color: "rgba(255, 255, 255, 0.25)",
                    },
                },
                axisLabel: {
                    color: "#FFFFFF",
                    fontFamily: "youshebiaotihei",
                },
            },
            yAxis: {
                type: "category",
                data: chatObj.xAxisData,
                boundaryGap: true,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: "#FFFFFF",
                    fontFamily: "youshebiaotihei",
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.25)",
                    },
                },
            },
            dataZoom: [
                {
                    yAxisIndex: 0,
                    show: false,
                    type: "inside",
                    startValue: 0,
                    endValue: chatObj.dataZoomEndValue,
                    zoomOnMouseWheel: false,
                    moveOnMouseWheel: true,
                    moveOnMouseMove: false,
                },
            ],
            series: chatObj.series,
        };
        option && myChart.setOption(option, true);

        //滚动
        if (list.length && list[0].chatData?.length > dataZoomEndValue + 1) {
            let pollTime = null;
            let isFocus = false;
            let IntervalTime = 1000 * 1;
            chartDom.addEventListener("mouseover", (() => {
                isFocus = true;
            }));
            chartDom.addEventListener("mouseout", (() => {
                option.dataZoom[0].startValue =
                    myChart.getModel().option.dataZoom[0].startValue;
                option.dataZoom[0].endValue =
                    myChart.getModel().option.dataZoom[0].endValue;
                isFocus = false;
            }));
            if (chatObj.xAxisData?.length > 0) {
                function Interval() {
                    if (isFocus == false) {
                        option.dataZoom[0].startValue += 1;
                        option.dataZoom[0].endValue += 1;
                        if (option.dataZoom[0].endValue === chatObj.xAxisData.length) {
                            setTimeout(() => {
                                option.dataZoom[0].startValue = 0;
                                option.dataZoom[0].endValue = chatObj.dataZoomEndValue;
                                option.series.forEach((item) => (item.animation = false));
                                myChart.setOption(option);
                                option.series.forEach((item) => (item.animation = true));
                                Interval();
                            });
                        }
                        myChart.setOption(option);
                    }
                }
                clearInterval(pollTime);
                pollTime = setInterval(Interval, IntervalTime);
            }
        }
    }
</script>