1

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.

CodePen here

{
    "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
            }
        }
    ]
}
Daemach
  • 417
  • 5
  • 13

1 Answers1

0

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:

  • Ideal: min: 48, max: 55
  • Warning: min: 55, max: 59
  • Danger: min: 59

Your visual map option would be:

visualMap: {
    dimension: 1,
    seriesIndex: 0,
    top: 20,
    right: 20,
    pieces: [
        {
            min: 48,
            max: 55,
            color: "#00d27a",
            label: "Ideal",
        },
        {
            min: 55,
            max: 59,
            color: "#f5803e",
            label: "Warning",
        },
        {
            min: 59,
            color: "#e63757",
            label: "Danger",
        },
    ],
    outOfRange: {
        color: "#000",
    },
},

Result:

See on Imgur

Indra Rudianto
  • 199
  • 5
  • 1
    That's what I did the first time. The problem is that the "good" range changes throughout the day - it's time dependent based on growth state. Therefore I had to create that other dimension by looking at the timestamp, determining what the range should be then assigning it to a color. – Daemach Oct 11 '20 at 19:24
  • Thanks for trying to help though! I think this is a bug in the charting library. – Daemach Oct 11 '20 at 19:33
  • Maybe you can create a function to generate visual map options based on newly labels (good, warning, danger) range changes, so you have dynamic visual map options, then update your overall chart options. I think the library currently doesn't support customizing line color if we use visual map to target that "other" dimension because it apply to individual item color instead of line color. – Indra Rudianto Oct 12 '20 at 09:06
  • I'm not sure what that means, but would appreciate an example. – Daemach Oct 12 '20 at 20:07
  • Alright. How do you determine the range for each label range? Is there any equation to calculate its range? – Indra Rudianto Oct 13 '20 at 04:05
  • You can create a function like `createVisualMap(data)`, calculate the ranges inside that function from your data array, and then return visual map options. If you can tell the big picture of your pipeline or apps, that's would help a lot. – Indra Rudianto Oct 13 '20 at 04:12
  • 1
    In general, there is a time line for the last 24 hours with a tick every 4 minutes. There are 2 ranges that apply based on the time of day - range one is in effect from 6AM =>6PM and range two from 6PM=>6AM. If it's 9AM, the value could be "red" because it falls within range one. At 9PM the same value could be "green" because it now falls in range two. The problem with the standard visual map is that it calculates color based on a single range. – Daemach Oct 14 '20 at 13:31