如何用 echarts 渲染自定义线？

Question

Been struggling to find this, and have even resorted to logging output of echarts' various objects in the console to try to see what's going on. It would seem that visualMap doesn't work properly when you specify a different dimension in your data, so I've been trying to write a simple renderItem function for my line series. I can't find any documentation or examples on specifics for rendering a line - specifically, when data is passed into it, how do I get coordinate points for both the start and end of the line? I can get the values of the point (the data point which would give you the coordinates of the current data point), but a line consists of 2 points (start and end). What am I missing here?

Codepen example to play with: https://codepen.io/WorldWideWebb/pen/JjbJpRJ

visualMap that didn't work (it changes the color of the point, NOT the line; the point colors do change just fine, but I want to color the line)

    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'
        }
    },

You can see the points in the different colors if you uncomment the visualMap in the codepen example and change "showSymbol" in the last item in the series to true.

This one was close, but I haven't been able to figure out how to get both the origin and end to create the line properly (x2 and y2 are both static); also, this seems to produce a bunch of separate lines, rather than a line series:

        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 }
            }
        }

Example of the data (this is time, wind speed, wind gust, wind direction, and temp); I use map to transform that into simple arrays when it's pulled:

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

My goal is to display a line - time is the X axis, wind speed is the y axis, and color the line based on wind direction. Like I said, all of it would work if I just wanted to color the points, but that would make the graph really cluttered (not what I'm going for).

How do I color each line segment based on wind direction? Can someone provide a simple example of passing data in to render a custom line using renderItem?

Answer 1

With a whole bunch of trial and error, I got it working. The solution was using params.dataIndexInside+1 to produce the next item in the series. renderItem contents:

    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))
        }
     },

Hope that saves someone some time