如何在一条线段上，根据类别的不同，使用不用的颜色渲染线条的不同部分？目前官网示例，只有根据y轴的值范围来确定颜色的示例

LK007CX commented 4 hours ago

Version

4.9.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=line-sections

Steps to Reproduce

这是我的代码的最小demo

<!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: ['1', '2', '3', '4'],
            inRange: {
                color: ['red', 'blue', 'yellow', 'black']
            },
            outOfRange: {
                color: 'green'
            }
        },
        series: [
            {
                name: 'Electricity',
                type: 'line',
                smooth: true,
                // prettier-ignore
                data: [[100, "1"],
                    [200, "2"],
                    [300, "3"],
                    [400, "4"]]
            }
        ]
    };

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

Current Behavior

目前这段代码，报错信息为: 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)

Expected Behavior

我想根据不同的类别（类别1，类别2...），去设置当前线条，不同区域的颜色，比如类别1对应红色，如何修复这段代码?

Environment

- OS: win10
- Browser: chrome
- Framework: js echarts

Any additional comments?

No response

echarts-bot[bot] commented 4 hours ago

@LK007CX It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** How do I render different parts of a line on a line, depending on the category, with different colors? At present, there is only an example of determining the color according to the value range of the y-axis

Ovilia commented 1 hour ago

类别是 y 值还是什么？理论上只有点（itemStyle）有数据，线段（lineStyle）对应两个数据，很难说对应什么

apache / echarts