0

一直在努力寻找这个，甚至诉诸于在控制台中记录 echarts 的各种对象的输出以尝试查看发生了什么。当您在数据中指定不同的维度时，visualMap 似乎无法正常工作，因此我一直在尝试为我的线条系列编写一个简单的 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 呈现自定义线吗？

4

1 回答 1

0

经过大量的反复试验，我得到了它的工作。解决方案是使用 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))
        }
     },

希望可以节省一些时间

于 2021-02-23T22:37:38.840 回答