ECharts - visual map not rendering line color (with pen)

3.4k views Asked by At

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

There are 1 answers

7
Indra Rudianto On

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