I am trying to use a visual map in echarts to color the line based on a dimension in my series data. At the moment the LABEL for the series is being colored correctly based on this map, but the line itself isn't. Is this a bug or am I doing it wrong?
I would really prefer more of a gradient between these values but at this point I'll take any progress.
{
"title": {
"text": "Humidity",
"left": "center"
},
"tooltip": {
"trigger": "axis"
},
"xAxis": {
"type": "time",
"axisLabel": { }
},
"yAxis": {
"splitLine": {
"show": false
},
"min": "dataMin",
"max": "dataMax"
},
"dataZoom": [
{
"startValue": "2014-06-01"
},
{
"type": "inside"
}
],
"visualMap": {
"dimension": 2,
"seriesIndex": 0,
"top": 20,
"right": 20,
"pieces": [
{
"value": 1,
"color": "#00d27a",
"label": "Ideal"
},
{
"value": 2,
"color": "#f5803e",
"label": "Warning"
},
{
"value": 3,
"color": "#e63757",
"label": "Danger"
}
],
"outOfRange": {
"color": "#000"
}
},
"series": [
{
"data": [
[
"2020-10-03T17:30:00",
50,
1
],
[
"2020-10-03T18:30:00",
51,
1
],
[
"2020-10-03T19:30:00",
52,
1
],
[
"2020-10-03T20:30:00",
51,
1
],
[
"2020-10-03T21:30:00",
50,
1
],
[
"2020-10-03T22:30:00",
50,
1
],
[
"2020-10-03T23:30:00",
49,
1
],
[
"2020-10-04T00:30:00",
49,
1
],
[
"2020-10-04T01:30:00",
50,
1
],
[
"2020-10-04T02:30:00",
51,
1
],
[
"2020-10-04T03:30:00",
52,
1
],
[
"2020-10-04T04:30:00",
54,
1
],
[
"2020-10-04T05:30:00",
55,
1
],
[
"2020-10-04T06:30:00",
55,
1
],
[
"2020-10-04T07:30:00",
55,
1
],
[
"2020-10-04T08:30:00",
55,
1
],
[
"2020-10-04T09:30:00",
55,
1
],
[
"2020-10-04T10:30:00",
54,
1
],
[
"2020-10-04T11:30:00",
53,
1
],
[
"2020-10-04T12:30:00",
52,
1
],
[
"2020-10-04T13:30:00",
50,
1
],
[
"2020-10-04T14:30:00",
48,
1
],
[
"2020-10-04T15:30:00",
48,
1
],
[
"2020-10-04T16:30:00",
49,
1
],
[
"2020-10-04T17:30:00",
51,
1
],
[
"2020-10-04T18:30:00",
52,
1
],
[
"2020-10-04T19:30:00",
52,
1
],
[
"2020-10-04T20:30:00",
52,
1
],
[
"2020-10-04T21:30:00",
52,
1
],
[
"2020-10-04T22:30:00",
51,
1
],
[
"2020-10-04T23:30:00",
48,
1
],
[
"2020-10-05T03:30:00",
49,
1
],
[
"2020-10-05T04:30:00",
55,
1
],
[
"2020-10-05T05:30:00",
56,
2
],
[
"2020-10-05T06:30:00",
57,
2
],
[
"2020-10-05T07:30:00",
58,
2
],
[
"2020-10-05T08:30:00",
58,
2
],
[
"2020-10-05T09:30:00",
59,
2
],
[
"2020-10-05T10:30:00",
59,
2
],
[
"2020-10-05T11:30:00",
59,
2
],
[
"2020-10-05T12:30:00",
58,
2
],
[
"2020-10-05T13:30:00",
55,
1
],
[
"2020-10-05T14:30:00",
54,
1
],
[
"2020-10-05T15:30:00",
49,
1
],
[
"2020-10-05T16:30:00",
52,
1
],
[
"2020-10-05T17:30:00",
53,
1
],
[
"2020-10-05T18:30:00",
53,
1
],
[
"2020-10-05T19:30:00",
54,
1
],
[
"2020-10-05T20:30:00",
54,
1
],
[
"2020-10-05T21:30:00",
54,
1
],
[
"2020-10-05T22:30:00",
54,
1
],
[
"2020-10-05T23:30:00",
54,
1
],
[
"2020-10-06T00:30:00",
53,
1
],
[
"2020-10-06T01:30:00",
53,
1
],
[
"2020-10-06T02:30:00",
52,
1
],
[
"2020-10-06T03:30:00",
50,
1
],
[
"2020-10-06T04:30:00",
52,
1
],
[
"2020-10-06T05:30:00",
53,
1
],
[
"2020-10-06T06:30:00",
53,
1
],
[
"2020-10-06T07:30:00",
53,
1
],
[
"2020-10-06T08:30:00",
53,
1
],
[
"2020-10-06T09:30:00",
53,
1
],
[
"2020-10-06T10:30:00",
52,
1
],
[
"2020-10-06T11:30:00",
50,
1
],
[
"2020-10-06T12:30:00",
49,
1
],
[
"2020-10-06T13:30:00",
47,
1
],
[
"2020-10-06T14:30:00",
45,
2
],
[
"2020-10-06T15:30:00",
45,
2
]
],
"name": "humi",
"title": "Humidity",
"type": "line",
"symbol": "none",
"label": {
"show": true
}
}
]
}
I think you should use dimension 1 instead of 2 because you want to map its humidity values and group humidity values to which range it fall into ideal, warning, and danger categories. For example:
Your visual map option would be:
Result:
See on Imgur