网上有博客，但介绍的都是竖着的。那横着的怎么办。
这几天写了一下这个温度计，主要是多个bar和scatter拼接而成。横竖的区分，是将x和y的坐标系内容进行替换，再serise里面讲xy的序号进行更改就可以。
{
"baseOption": {
"backgroundColor": "transparent",
"timeline": {
"axisType": "category",
"autoPlay": true,
"playInterval": 1000,
"data": [
"中国",
"俄罗斯",
"美国",
"日本",
"日本2"
]
},
"grid": {
"left": 50
},
"tooltip": {
"confine": true,
"textStyle": {
"align": "left"
}
},
"toolbox": {
"feature": {
"saveAsImage": {
"backgroundColor": "rgba(211,211,211,0.5)"
},
"myTool": {
"show": true,
"title": "图形切换",
"icon": "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAe5JREFUSEu9lVFS2zAQhv+VMQ/AQ46QngA/AslM3RM0N2huUC5AooQLhBtwA8wJCDNppo/uDegJ2oeGB5RoGSlxEHIcC6ZBbx6v9tv9d1dL2PGht/iPz2Ri7NVU5qH3tgNOZDOOxHcCd5jot+uUGE0GbtRCX+GnfKgCVgL22wMJpi4zpHrUGXL513cSnV52hGAJ4E7N9GCTTRmQyEZ8JG4IfP806ZvLtSduDc8BdNVMpz6kBIjbwzE0rtW0d13r2TEosvEhrwBWFgChkfsB2EyYm2raNxnZ8wJYFjRTP3q2U+rOXvsynf9b5L4kRgE1192i8GuAiZ41PYRKY+0ZX9WMv7gQKxXptMhiDYhbw9zVzxhGEY6rMmHWHSJKmDn3IdbXSokXgElt0ksLhzZC0Pp7q2QMI+2osLEyrXwtAcvWzFxAXQ22/d9vDTJNYjSfXIw/CADATctEF58NuxD4FpKJP5RliYxDr8hWtkMxJsIxM34RcVZZcK/7NhZ5Y5uuIZyFDl9lm6Jq0BLZ2DuKElOwELls9AvdKQ2aubzbp2IV3k4fO3cmCHT3NLkYBMoS/ly7k2wXDrivZnxbWiaJbEQH9FkQJBj36pFl2MJxQzaFF3QOohSEP+4vYnxi5kxpHr1rZW6S5v8v/ZAC1Ng8A1GQPCif4QbWAAAAAElFTkSuQmCC"
}
},
"right": 10,
"show": true
},
"title": {
"show": false
},
"xAxis": [
{
"show": false,
"min": 0,
"max": 100
},
{
"show": false,
"data": [],
"min": 0,
"max": 9
}
],
"yAxis": [
{
"show": false,
"data": []
},
{
"show": false,
"data": []
},
{
"show": false,
"data": []
},
{
"show": false,
"min": -110,
"max": 93
}
],
"series": [
{
"name": "条",
"type": "bar",
"yAxisIndex": 0,
"barWidth": 16,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"barBorderRadius": 40
}
},
"z": 2
},
{
"type": "bar",
"yAxisIndex": 1,
"barGap": "-100%",
"barWidth": 25,
"itemStyle": {
"normal": {
"color": "#ffffff",
"barBorderRadius": 40
}
},
"z": 1
},
{
"type": "bar",
"yAxisIndex": 2,
"barGap": "-100%",
"barWidth": 32,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"barBorderRadius": 40
}
},
"z": 0
},
{
"type": "scatter",
"hoverAnimation": false,
"yAxisIndex": 0,
"symbolSize": 42,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"opacity": 1
}
},
"z": 2
},
{
"type": "scatter",
"hoverAnimation": false,
"yAxisIndex": 1,
"symbolSize": 52,
"itemStyle": {
"normal": {
"color": "#ffffff",
"opacity": 1
}
},
"z": 1
},
{
"type": "scatter",
"hoverAnimation": false,
"yAxisIndex": 2,
"symbolSize": 62,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"opacity": 1
}
},
"z": 0
},
{
"name": "刻度",
"type": "bar",
"xAxisIndex": 1,
"yAxisIndex": 3,
"label": {
"normal": {
"show": true,
"position": "top",
"distance": 12,
"color": "white",
"fontSize": 13
}
},
"barGap": "-100%",
"barWidth": 5,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"barBorderRadius": 10
}
},
"z": 0
}
]
},
"options": [
{
"series": [
{
"data": [
23
],
"real": 0.1
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
},
{
"series": [
{
"data": [
31
],
"real": 0.2
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
},
{
"series": [
{
"data": [
55
],
"real": 0.5
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
},
{
"series": [
{
"data": [
31
],
"real": 0.2
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
},
{
"series": [
{
"data": [
47
],
"real": 0.4
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
}
]
}
竖着
{
"baseOption": {
"backgroundColor": "transparent",
"timeline": {
"axisType": "category",
"autoPlay": true,
"playInterval": 1000,
"data": [
"中国",
"俄罗斯",
"美国",
"日本",
"日本2"
]
},
"grid": {
"top": 10,
"bottom": 80
},
"tooltip": {
"confine": true,
"textStyle": {
"align": "left"
}
},
"toolbox": {
"feature": {
"saveAsImage": {
"backgroundColor": "rgba(211,211,211,0.5)"
},
"myTool": {
"show": true,
"title": "图形切换",
"icon": "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAe5JREFUSEu9lVFS2zAQhv+VMQ/AQ46QngA/AslM3RM0N2huUC5AooQLhBtwA8wJCDNppo/uDegJ2oeGB5RoGSlxEHIcC6ZBbx6v9tv9d1dL2PGht/iPz2Ri7NVU5qH3tgNOZDOOxHcCd5jot+uUGE0GbtRCX+GnfKgCVgL22wMJpi4zpHrUGXL513cSnV52hGAJ4E7N9GCTTRmQyEZ8JG4IfP806ZvLtSduDc8BdNVMpz6kBIjbwzE0rtW0d13r2TEosvEhrwBWFgChkfsB2EyYm2raNxnZ8wJYFjRTP3q2U+rOXvsynf9b5L4kRgE1192i8GuAiZ41PYRKY+0ZX9WMv7gQKxXptMhiDYhbw9zVzxhGEY6rMmHWHSJKmDn3IdbXSokXgElt0ksLhzZC0Pp7q2QMI+2osLEyrXwtAcvWzFxAXQ22/d9vDTJNYjSfXIw/CADATctEF58NuxD4FpKJP5RliYxDr8hWtkMxJsIxM34RcVZZcK/7NhZ5Y5uuIZyFDl9lm6Jq0BLZ2DuKElOwELls9AvdKQ2aubzbp2IV3k4fO3cmCHT3NLkYBMoS/ly7k2wXDrivZnxbWiaJbEQH9FkQJBj36pFl2MJxQzaFF3QOohSEP+4vYnxi5kxpHr1rZW6S5v8v/ZAC1Ng8A1GQPCif4QbWAAAAAElFTkSuQmCC"
}
},
"right": 10,
"show": true
},
"title": {
"show": false
},
"xAxis": [
{
"show": false,
"data": []
},
{
"show": false,
"data": []
},
{
"show": false,
"data": []
},
{
"show": false,
"min": -110,
"max": 93
}
],
"yAxis": [
{
"show": false,
"min": 0,
"max": 100
},
{
"show": false,
"data": [],
"min": 0,
"max": 9
}
],
"series": [
{
"name": "条",
"type": "bar",
"xAxisIndex": 0,
"barWidth": 16,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"barBorderRadius": 40
}
},
"z": 2
},
{
"type": "bar",
"xAxisIndex": 1,
"barGap": "-100%",
"barWidth": 25,
"itemStyle": {
"normal": {
"color": "#ffffff",
"barBorderRadius": 40
}
},
"z": 1
},
{
"type": "bar",
"xAxisIndex": 2,
"barGap": "-100%",
"barWidth": 32,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"barBorderRadius": 40
}
},
"z": 0
},
{
"type": "scatter",
"hoverAnimation": false,
"xAxisIndex": 0,
"symbolSize": 42,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"opacity": 1
}
},
"z": 2
},
{
"type": "scatter",
"hoverAnimation": false,
"xAxisIndex": 1,
"symbolSize": 52,
"itemStyle": {
"normal": {
"color": "#ffffff",
"opacity": 1
}
},
"z": 1
},
{
"type": "scatter",
"hoverAnimation": false,
"xAxisIndex": 2,
"symbolSize": 62,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"opacity": 1
}
},
"z": 0
},
{
"name": "刻度",
"type": "bar",
"yAxisIndex": 1,
"xAxisIndex": 3,
"label": {
"normal": {
"show": true,
"position": "right",
"distance": 12,
"color": "white",
"fontSize": 13
}
},
"barGap": "-100%",
"barWidth": 5,
"itemStyle": {
"normal": {
"color": "#fd4d49",
"barBorderRadius": 10
}
},
"z": 0
}
]
},
"options": [
{
"series": [
{
"data": [
23
],
"real": 0.1
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
},
{
"series": [
{
"data": [
31
],
"real": 0.2
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
},
{
"series": [
{
"data": [
55
],
"real": 0.5
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
},
{
"series": [
{
"data": [
31
],
"real": 0.2
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
},
{
"series": [
{
"data": [
47
],
"real": 0.4
},
{
"data": [
99
]
},
{
"data": [
100
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
0
]
},
{
"data": [
{
"value": 0,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.25"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.5"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "0.75"
}
}
},
{
"value": 5,
"label": {
"normal": {
"formatter": ""
}
}
},
{
"value": 10,
"label": {
"normal": {
"formatter": "1"
}
}
}
]
}
]
}
]
}
参考：
https://blog.csdn.net/ying456baby/article/details/125068477