如何用echarts渲染自定义线条？

Question

一直在努力寻找这一点，甚至求助于在控制台中记录 echarts 的各种对象的输出来尝试查看发生了什么。当您在数据中指定不同的维度时，视觉映射似乎无法正常工作，因此我一直在尝试为我的线系列编写一个简单的 renderItem 函数。我找不到任何有关渲染线条的细节的文档或示例 - 具体来说，当数据传递到其中时，如何获取线条起点和终点的坐标点？我可以获得该点的值（该数据点将为您提供当前数据点的坐标），但一条线由 2 个点（起点和终点）组成。我在这里缺少什么？

Codepen 示例： https: //codepen.io/WorldWideWebb/pen/JjbJpRJ

VisualMap 不起作用（它改变了点的颜色，而不是线的颜色；点颜色确实改变得很好，但我想给线着色）

    visualMap: {
        dimension: 3,
        seriesIndex: 2,
        show: false,
        pieces: [{
            gt: 0,
            lte: 50,
            color: '#93CE07'
        }, {
            gt: 50,
            lte: 100,
            color: '#FBDB0F'
        }, {
            gt: 100,
            lte: 150,
            color: '#FC7D02'
        }, {
            gt: 150,
            lte: 200,
            color: '#FD0100'
        }, {
            gt: 200,
            lte: 300,
            color: '#AA069F'
        }, {
            gt: 300,
            color: '#AC3B2A'
        }],
        outOfRange: {
            color: '#999'
        }
    },

如果取消注释 codepen 示例中的 VisualMap 并将本系列最后一项中的“showSymbol”更改为 true，您可以看到不同颜色的点。

这个已经很接近了，但我一直无法弄清楚如何获得起点和终点以正确创建线条（x2 和 y2 都是静态的）；另外，这似乎产生了一堆单独的线，而不是一系列线：

        renderItem: function (params, api) { 
            var coord = api.coord([api.value(0), api.value(1)]);
                
            return {
                type: 'line',
                shape: {
                    x1: coord[0],
                    y1: coord[1],
                    x2: 200,
                    y2: 100
                },
                style: { stroke: formatDirectionLabel(api.value(1)), lineWidth: 2 }
            }
        }

数据示例（时间、风速、阵风、风向和温度）；当拉动它时，我使用 map 将其转换为简单的数组：

{"dt":"2021-02-18 06:33:10","w":"7.38","g":"9.84","dir":"343","f":"47.70"}

我的目标是显示一条线 - 时间是 X 轴，风速是 y 轴，并根据风向为线着色。就像我说的，如果我只想给点着色，那么所有这些都可以工作，但这会使图表变得非常混乱（不是我想要的）。

如何根据风向为每条线段着色？有人可以提供一个简单的示例，使用 renderItem 传递数据以呈现自定义行吗？

Answer 1

经过大量的试验和错误，我成功了。解决方案是使用 params.dataIndexInside+1 生成该系列中的下一个项目。渲染项内容：

    let coord1 = api.coord([api.value(0, params.dataIndexInside), api.value(1, params.dataIndexInside)]),
        coord2 = api.coord([api.value(0, params.dataIndexInside+1), api.value(1, params.dataIndexInside+1)]);

    return {
        type: 'line',
        shape: {
           x1: coord1[0],
           y1: coord1[1],
           x2: coord2[0],
           y2: coord2[1]
        },
        style: {
           stroke: customFormattingFunction(api.value(3))
        }
     },

希望能为某人节省一些时间