echarts折线图各段设置不同颜色

echarts折线图各段设置不同颜色

可以通过设置 visualMap 属性，来控制不同线段的颜色；
文档连接： https://echarts.apache.org/zh/option.html#visualMap；

下面我们选择 分段型 讲述：
1、设置 visualMap 属性：
type: ‘piecewise’,

2、设置 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
show: ‘false’,

3、设置 指定用数据的『哪个维度』，映射到视觉元素上；『数据』即 series.data。 可以把 series.data 理解成一个二维数组;
dimension: 0,
参考文档： https://echarts.apache.org/zh/option.html#visualMap-piecewise.dimension

4、指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
seriesIndex:0,
如果 series.data 有多个数据；即多条折线，可根据索引值来指定；
参考文档：https://echarts.apache.org/zh/option.html#visualMap-piecewise.seriesIndex

5、设置 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。

//方式一： 
pieces: [
    {min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
    {min: 900, max: 1500},
    {min: 310, max: 1000},
    {min: 200, max: 300},
    {min: 10, max: 200, label: '10 到 200（自定义label）'},
    {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
    {max: 5}     // 不指定 min，表示 min 为无限大（-Infinity）。
]

//方式二： 
pieces: [{
            lte: 6,
            color: 'orange'
        }, {
            gt: 6,
            lte: 8,
            color: 'red'
        }]
    }]

具体设置，参照文档，两种方式设置；此处不在叙述；
https://echarts.apache.org/zh/option.html#visualMap-piecewise.pieces

下面举了一个例子，可直接将此 option 放入 echarts 实例演示中查看：

let option = {
    title: {
        text: '一天用电量分布',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} W'
        },
        axisPointer: {
            snap: true
        }
    },
    visualMap: [{
    	type: 'piecewise',
        show: false, 
        dimension: 0, 
        seriesIndex:0, //第一部分数据  
        pieces: [{
            lte: 6,
            color: 'orange'
        }, {
            gt: 6,
            lte: 8,
            color: 'red'
        }, {
            gt: 8,
            lte: 14,
            color: 'purple'
        }, {
            gt: 14,
            lte: 17,
            color: 'Chocolate'
        }, {
            gt: 17,
            color: 'pink'
        }]
    },
    {
        show: false, 
        type: 'piecewise',
        dimension: 0,
        seriesIndex:1,//第二部分数据
        pieces: [{
            lte: 3,
            color: 'blue'
        }, {
            gt: 3,
            lte: 8,
            color: 'black'
        }, {
            gt: 8,
            lte: 14,
            color: 'green'
        }, {
            gt: 14,
            lte: 17,
            color: 'grey'
        }, {
            gt: 17,
            color: 'DodgerBlue'
        }]
    }],
    series: [
    	//第一部分数据
        { 
            name: '用电量',
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400]
        },
  		 //第二部分数据
        {
            name: '费用',
            type: 'line',
            smooth: true,
            data: [200, 180, 150, 160, 170, 200, 450, 400, 300, 290, 280, 290, 300, 400, 400, 650, 700, 600, 450, 300]
        }
    ]
};

例子参考来源： 查看例子参考来源