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:
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 unment 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?
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 unment 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?
Share Improve this question edited Feb 18, 2021 at 21:40 dgwebb asked Feb 18, 2021 at 17:46 dgwebbdgwebb 3795 silver badges18 bronze badges1 Answer
Reset to default 7With 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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745390806a4625653.html
评论列表（0条）