ECharts - 视觉图不渲染线条颜色（带笔）
[英]ECharts - visual map not rendering line color (with pen)
问题描述
I am trying to use a visual map in echarts to color the line based on a dimension in my series data.
我正在尝试使用 echarts 中的可视化地图根据我的系列数据中的维度为线条着色。 At the moment the LABEL for the series is being colored correctly based on this map, but the line itself isn't.目前，该系列的 LABEL 正在根据此地图正确着色，但线条本身却没有。 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
}
}
]
}
1 个解决方案
解决方案1
0 2020-10-10 17:25:37
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.我认为您应该使用维度 1 而不是维度 2，因为您想要映射其湿度值并将湿度值分组到理想、警告和危险类别的范围内。 For example:例如：
- Ideal: min: 48, max: 55理想：最小：48，最大：55
- Warning: min: 55, max: 59警告：最小：55，最大：59
- Danger: min: 59危险：最低：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:结果：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
ECharts：更改线条颜色 - ECharts: change line color
图表，如何使用数据系列切换线条颜色 - Echarts, how to use data series to switch color of line
echarts的自定义动态颜色 - Custom Dynamic color for echarts
echarts地图未与laravel一起显示 - echarts map not displaying with laravel
Echarts 多折线图 - Echarts multiple line chart
如何在echarts中画一条线 - How to draw a line in echarts
ECharts：改变线条颜色。 我选了 2 种颜色。两种颜色都显示奇偶风格 - ECharts: change line color. i have pick 2 color .Both two color show like odd and even style
如何将所选颜色设置为笔颜色？ - How to set selected color as pen color?
eCharts 中日历中的自定义边框颜色 - custom border color in Calendar in eCharts
eCharts 3-在点击时放大地理地图 - eCharts 3 - zoom on geo map onclick
相关标签