echarts-滑动柱图

先上视频看看效果

滚动柱图

 

 

 1、柱状图两种颜色分别用的两个base64的图片（大家想用什么样式的自行更换）；

2、myChart需要初始化，下文中是自己项目中用的一种形式；

3、setInterval定时器来实现的自右向左的滚动；

 var myChart = echarts.init(document.querySelector("#box6cafb4c0a5ed11edbe96ff19d77780be>div"));

 const getSymbolData = (datas) => {

        let arr = [];

        for (var i = 0; i < datas.length; i++) {

            arr.push({

                value: datas[i],

                symbolPosition: "end",

            });

        }

        return arr;

    };



    const createSpirit = (data) => {

        const spiritGreen =

            "image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSA0NSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMxOTRlNjA7fS5jbHMtMntmaWxsOiMyYjc2ODE7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT7otYTmupAgMTM8L3RpdGxlPjxnIGlkPSLlm77lsYJfMiIgZGF0YS1uYW1lPSLlm77lsYIgMiI+PGcgaWQ9IuWbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPjxyZWN0IGlkPSLmqZnmlrnlvaIiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjI5IiBoZWlnaHQ9IjQ1Ii8+PHBvbHlnb24gaWQ9IuapmeiPseW9oiIgY2xhc3M9ImNscy0yIiBwb2ludHM9IjI5IDIzIDAgNDUgMCAyMiAyOSAwIDI5IDIzIi8+PC9nPjwvZz48L3N2Zz4=";

        const spiritOrange =

            "image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSA0NSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM1MTNCM0I7fS5jbHMtMntmaWxsOiNCQTY4NEY7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT7otYTmupAgMTM8L3RpdGxlPjxnIGlkPSLlm77lsYJfMiIgZGF0YS1uYW1lPSLlm77lsYIgMiI+PGcgaWQ9IuWbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPjxyZWN0IGlkPSLmqZnmlrnlvaIiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjI5IiBoZWlnaHQ9IjQ1Ii8+PHBvbHlnb24gaWQ9IuapmeiPseW9oiIgY2xhc3M9ImNscy0yIiBwb2ludHM9IjI5IDIzIDAgNDUgMCAyMiAyOSAwIDI5IDIzIi8+PC9nPjwvZz48L3N2Zz4=";

        let seriesData = [];

        for (let i = 0; i < data.length; i++) {

            let spirit = spiritGreen;

            if (i % 3 == 0 && i != 0) {

                spirit = spiritOrange;

            }

            seriesData.push({

                value: data[i],

                symbol: spirit,

                symbolRepeat: "fixed",

                symbolMargin: 0,

                symbolClip: true,

                symbolSize: [25, 41],

            });

        }

        return seriesData;

    };



    let xaxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];

    let yaxisData = [90, 80, 100, 70, 65, 69, 80, 100, 70, 65, 69, 66];



    let option = {

        backgroundColor: "#232F49",

        tooltip: {

            show: false,

        },

        yAxis: [

            {

                name: "(个)",

                nameTextStyle: {

                    color: "#AEC9FF",

                    fontWeight: 400,

                    fontSize: 14,

                },

                axisLabel: {

                    color: "#AEC9FF",

                },

                axisLine: {

                    show: true,

                    symbol: ["none", "rect"],

                    symbolSize: [6, 12],

                    lineStyle: {

                        width: 2,

                        color: "#537DAA",

                    },

                },

                axisTick: {

                    show: false,

                },

                splitLine: {

                    show: false,

                },

            },

            {

                type: "value",

                gridIndex: 0,

                min: 50,

                max: 100,

                splitNumber: 8,

                splitLine: {

                    show: false,

                },

                axisLine: {

                    show: false,

                },

                axisTick: {

                    show: false,

                },

                axisLabel: {

                    show: false,

                },

                splitArea: {

                    show: true,

                    areaStyle: {

                        color: ["rgba(7, 28, 47, 0.8)", "rgba(10, 34, 56, 0.8)"],

                    },

                },

            },

        ],

        xAxis: {

            data: xaxisData,

            axisLabel: {

                color: "#AEC9FF",

                interval: 0,

            },

            axisLine: {

                show: true,

                symbol: ["none", "rect"],

                symbolSize: [6, 12],

                lineStyle: {

                    width: 2,

                    color: "#537DAA",

                },

            },

            axisTick: {

                show: false,

            },

        },

        grid: {

            top: "15%",

            left: "1%",

            right: "1%",

            bottom: "1%",

            containLabel: true,

        },

        dataZoom: [

            {

                xAxisIndex: 0, //这里是从X轴的0刻度开始

                show: false, //是否显示滑动条，不影响使用

                type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件

                startValue: 0, // 从头开始。

                endValue: 5, // 一次性展示4个。

            },

        ],

        series: [

            {

                type: "bar",

                barWidth: 1,

                color: "rgba(0,0,0,0)",

                label: {

                    show: true,

                    position: "top",

                    fontSize: 18,

                    color: "#fff",

                    fontFamily: "PangMenZhengDao",

                },

                data: yaxisData,

                z: 1,

            },

            {

                type: "pictorialBar",

                data: createSpirit(yaxisData),

                z: 10,

            },

            {

                type: "pictorialBar",

                symbol: "react",

                symbolSize: [32, 8],

                symbolOffset: [0, -0],

                z: 12,

                itemStyle: {

                    color: "#fff",

                },

                data: getSymbolData(yaxisData),

            },

        ],

    };



    //自动滚动

    timeInterval = setInterval(() => {

        if (option.dataZoom[0].endValue == xaxisData.length) {

            option.dataZoom[0].endValue = 5;

            option.dataZoom[0].startValue = 0;

        } else {

            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;

            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;

        }

        myChart.setOption(option);

    }, 2000);