echarts 折线图每段不同颜色

最新推荐文章于 2025-01-07 17:50:09 发布

路虽远~行将至

最新推荐文章于 2025-01-07 17:50:09 发布

阅读量776

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/dddgddd/article/details/140037116

版权

在这里插入图片描述

let aa = [
            {
                time: '2024-01-01 01:00:00',
                val: 10,
                color:'green'
            },
            {
                time: '2024-01-01 02:00:00',
                val: 20,
                color:'yellow'
            },
            {
                time: '2024-01-01 03:00:00',
                val: 50,
                color:'yellow'
            },
            {
                time: '2024-01-01 04:00:00',
                val: 10,
                color:'red'
            },
            {
                time: '2024-01-01 05:00:00',
                val: 20,
                color:'red'
            },
            {
                time: '2024-01-01 06:00:00',
                val: 50,
                color:'green'
            },
            {
                time: '2024-01-02 01:00:00',
                val: 10,
                color:'green'
            },
            {
                time: '2024-01-02 02:00:00',
                val: 20,
                color:'green'
            },
            {
                time: '2024-01-02 03:00:00',
                val: 50,
                color:'red'
            },
            {
                time: '2024-01-02 04:00:00',
                val: 10,
                color:'red'
            },
            {
                time: '2024-01-02 05:00:00',
                val: 20,
                color:'red'
            },
            {
                time: '2024-01-02 06:00:00',
                val: 50,
                color:'yellow'
            },
        ]
        let arr = []
        let xdata = []
        let ydata = []

        for(let i=0;i<aa.length;i++){
            xdata.push(aa[i].time)
            ydata.push(aa[i].val)
            let obj = {
                gt:i,
                lte:i+1,
                color:aa[i].color
            }
            arr.push(obj)
        }


        option =  {
            title: {
                text: "一天用电量分布",
                subtext: "纯属虚构",
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                },
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {},
                },
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: xdata,
            },
            yAxis: {
                type: "value",
                axisLabel: {
                    formatter: "{value} W",
                },
                axisPointer: {
                    snap: true,
                },
            },
            visualMap: [
                {
                    show: false,
                    dimension: 0,
                    seriesIndex: 0, 
                    pieces: arr,
                },

            ],
            series: [
                {
                    name: "用电量",
                    type: "line",
                    smooth: true,
                    data: ydata,
                },

            ],
        }