如何按类别为ECharts折线分段上色？现有代码报错求助

数据老陈

2026-6-16

为折线图不同类别分段设置不同颜色的问题解决

问题描述

需求是根据类别为折线图的不同分段设置不同颜色，现有实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
        #main {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script>
    const myChart = echarts.init(document.getElementById('main'));

    option = {
        title: {
            text: 'Distribution of Electricity',
            subtext: 'Fake Data'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // prettier-ignore
            data: ['00:00', '01:15', '02:30', '03:45'  ]
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} W'
            },
            axisPointer: {
                snap: true
            }
        },
        visualMap: {
            show: false,
            dimension: 1,
            categories: ['type1', 'type2', 'type3', 'type4'],
            inRange: {
                color: ['red', 'blue', 'yellow', 'black']
            },
            outOfRange: {
                color: 'green'
            }
        },
        series: [
            {
                name: 'Electricity',
                type: 'line',
                smooth: true,
                // prettier-ignore
                data: [[100, "type1"],
                    [200, "type2"],
                    [300, "type3"],
                    [400, "type4"]]
            }
        ]
    };


    myChart.setOption(option);
</script>
</body>
</html>

报错信息

运行代码时触发以下错误：

echarts.min.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'coord')
at gS (echarts.min.js:45:338543)
at e.render (echarts.min.js:45:341108)
at t.progress (echarts.min.js:45:166893)
at t._doProgress (echarts.min.js:45:135412)
at t.perform (echarts.min.js:45:134984)
at echarts.min.js:45:216047
at e. (echarts.min.js:45:116287)
at Array.forEach ()
at E (echarts.min.js:35:5071)
at e.eachSeries (echarts.min.js:45:116207)

问题原因

原代码的核心错误在于：ECharts的visualMap组件处理折线图时，无法直接识别字符串类型的类别维度。visualMap对于类别型映射需要配合数值范围（min/max）才能正常解析，直接传入字符串会导致内部坐标计算逻辑出错，触发Cannot read properties of undefined (reading 'coord')错误。

解决方案

提供两种可行的解决思路：

方案一：通过数值化类别配合visualMap实现

将类别转换为数值，让visualMap能正确识别并映射颜色，同时保留类别信息在tooltip中展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
        #main {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script>
    const myChart = echarts.init(document.getElementById('main'));

    // 将类别映射为数值，适配visualMap的数值解析逻辑
    const typeMap = {
        type1: 0,
        type2: 1,
        type3: 2,
        type4: 3
    };

    option = {
        title: {
            text: 'Distribution of Electricity',
            subtext: 'Fake Data'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            // 自定义tooltip，将数值转回原始类别名称
            formatter: function(params) {
                const type = Object.keys(typeMap).find(key => typeMap[key] === params[0].data[1]);
                return `${params[0].name}<br/>${params[0].seriesName}: ${params[0].data[0]} W<br/>类型: ${type}`;
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '01:15', '02:30', '03:45']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} W'
            },
            axisPointer: {
                snap: true
            }
        },
        visualMap: {
            show: false,
            dimension: 1, // 指定使用数据的第二个维度（数值化的类别）
            categories: ['type1', 'type2', 'type3', 'type4'],
            min: 0,
            max: 3,
            inRange: {
                color: ['red', 'blue', 'yellow', 'black']
            }
        },
        series: [
            {
                name: 'Electricity',
                type: 'line',
                smooth: true,
                polyline: true, // 开启折线分段着色支持
                lineStyle: {
                    width: 3 // 加粗线条，便于区分颜色
                },
                // 将类别替换为映射后的数值
                data: [
                    [100, typeMap.type1],
                    [200, typeMap.type2],
                    [300, typeMap.type3],
                    [400, typeMap.type4]
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>
</body>
</html>

方案二：拆分线段为独立series

将每个类别对应的折线分段拆分为独立的series，直接为每个series设置颜色，逻辑更直观：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
        #main {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script>
    const myChart = echarts.init(document.getElementById('main'));

    // 定义每个折线分段的起点、终点、类别和颜色
    const segmentData = [
        { start: ['00:00', 100], end: ['01:15', 200], type: 'type1', color: 'red' },
        { start: ['01:15', 200], end: ['02:30', 300], type: 'type2', color: 'blue' },
        { start: ['02:30', 300], end: ['03:45', 400], type: 'type3', color: 'yellow' }
    ];

    // 转换为ECharts需要的series数组
    const seriesList = segmentData.map(item => ({
        name: `Electricity (${item.type})`,
        type: 'line',
        smooth: true,
        data: [item.start, item.end],
        lineStyle: {
            color: item.color,
            width: 3
        },
        symbol: 'none' // 隐藏标记点，保持整体视觉一致
    }));

    option = {
        title: {
            text: 'Distribution of Electricity',
            subtext: 'Fake Data'
        },
        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']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} W'
            },
            axisPointer: {
                snap: true
            }
        },
        series: seriesList
    };

    myChart.setOption(option);
</script>
</body>
</html>

方案对比

方案一适合类别较多的场景，通过visualMap统一管理颜色映射，维护成本低。
方案二适合类别较少的场景，逻辑直接，不需要额外的数值转换步骤。

内容的提问来源于stack exchange，提问作者user28085707

如何按类别为ECharts折线分段上色？现有代码报错求助

问题描述 #

报错信息 #

问题原因 #

解决方案 #

方案一：通过数值化类别配合visualMap实现 #

方案二：拆分线段为独立series #

方案对比 #