Echarts在线免费图表

 
            
const data = {
    "legend": [
        "作他多地团",
        "石花温程步",
        "己书别音增"
    ],
    "datas": [
        [
            56,
            29,
            23,
            62,
            48,
            54,
            46,
            73,
            11,
            66
        ],
        [
            58,
            27,
            72,
            65,
            34,
            76,
            37,
            56,
            53,
            54
        ],
        [
            49,
            11,
            25,
            79,
            60,
            23,
            21,
            61,
            25,
            49
        ]
    ],
    "category": [
        "bulutjcpy",
        "ncyyluxuc",
        "thktyktzuh",
        "rdijokg",
        "jgawwpil",
        "oytyleukoh",
        "tbkvofddc",
        "bcskcq",
        "ggmwpvfk",
        "fztpnftkqy"
    ]
}
render(data)
function render({ datas, legend, category }) {
    //自动滚动
    let startValue = 0
    let endValue = 4
    let maxValue = category.length
    let timer = null
    option = {
        backgroundColor: 'dark',
        legend: {
            top: 0,
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: 'rgba(255,255,255,0.7)',
                fontSize: 16
            },
            data: legend,  // ! 调整系列名展示顺序
        },
        dataZoom: {
            show: false,
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue, // 从头开始。
            endValue
        },
        xAxis: {
            type: 'category',
            data: category,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: 'rgba(255,255,255,0.7)', rotate: '45' },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: 'rgba(255,255,255,0.7)' },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.15)',
                }
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            padding: [12, 17, 20, 23],
            textStyle: { color: '#424242' },
            renderMode: 'html',
            className: 'tooltip',
            order: 'seriesDesc', // ! 顺序调整
        },
        color: ['rgba(222,87,92,1)', 'rgba(243,133,3,1)', 'rgba(255, 247, 0, 0.9)'],
        series: datas.map((item, index) => {
            return {
                name: legend[index],
                type: 'bar',
                barWidth: 24,
                stack: 'total',
                data: item
            }
        })
        ,
    };

    myChart.setOption(option)
    myChart.on('mouseover', stop)
    myChart.on('mouseout', goMove)
    autoMove()


    function autoMove() {
        if (timer) return
        timer = setInterval(() => {
            console.log(startValue, endValue, maxValue)

            if (endValue === maxValue) {
                startValue = 0
                endValue = 5
                myChart.setOption({
                    dataZoom: {
                        startValue, // 从头开始。
                        endValue
                    }

                })
            } else {
                myChart.setOption({
                    dataZoom: {
                        startValue: ++startValue, // 从头开始。
                        endValue: ++endValue
                    }

                })
            }
        }, 3000);
    }
    //停止滚动
    function stop(...args) {
        console.log(args)
        clearInterval(timer)
        timer = null
    }
    //继续滚动
    function goMove(...args) {
        console.log(args)
        autoMove()
    }
}