markdown 由简入繁，上手跟我做（二十三）echarts 图表 - 平行坐标系
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"title": {
"text": "基础平行坐标系示例"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"position": "top"
},
"parallelAxis": [
{
"dim": 0,
"name": "Price"
},
{
"dim": 1,
"name": "Net Weight"
},
{
"dim": 2,
"name": "Amount"
},
{
"dim": 3,
"name": "Score",
"type": "category",
"data": [
"Excellent",
"Good",
"OK",
"Bad"
]
}
],
"series": {
"type": "parallel",
"lineStyle": {
"normal": {
"width": 4,
"opacity": 0.5
}
},
"data": [
[
12.99,
100,
82,
"Good"
],
[
9.99,
80,
77,
"OK"
],
[
20,
120,
60,
"Excellent"
]
]
}
}
json
{
"title": {
"text": "基础平行坐标系示例"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"position": "top"
},
"parallelAxis": [
{
"dim": 0,
"name": "Price"
},
{
"dim": 1,
"name": "Net Weight"
},
{
"dim": 2,
"name": "Amount"
},
{
"dim": 3,
"name": "Score",
"type": "category",
"data": [
"Excellent",
"Good",
"OK",
"Bad"
]
}
],
"series": {
"type": "parallel",
"lineStyle": {
"normal": {
"width": 4,
"opacity": 0.5
}
},
"data": [
[
12.99,
100,
82,
"Good"
],
[
9.99,
80,
77,
"OK"
],
[
20,
120,
60,
"Excellent"
]
]
}
}
示例 2
效果
{
"title": {
"text": "北京-上海-广州空气指数"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"position": "top"
},
"backgroundColor": "#333",
"legend": {
"bottom": 30,
"data": [
"北京",
"上海",
"广州"
],
"itemGap": 20,
"textStyle": {
"color": "#fff",
"fontSize": 14
}
},
"tooltip": {
"padding": 10,
"backgroundColor": "#222",
"borderColor": "#777",
"borderWidth": 1
},
"parallelAxis": [
{
"dim": 0,
"name": "日期",
"inverse": true,
"max": 31,
"nameLocation": "start"
},
{
"dim": 1,
"name": "AQI"
},
{
"dim": 2,
"name": "PM2.5"
},
{
"dim": 3,
"name": "PM10"
},
{
"dim": 4,
"name": " CO"
},
{
"dim": 5,
"name": "NO2"
},
{
"dim": 6,
"name": "SO2"
},
{
"dim": 7,
"name": "等级",
"type": "category",
"data": [
"优",
"良",
"轻度污染",
"中度污染",
"重度污染",
"严重污染"
]
}
],
"visualMap": {
"show": true,
"min": 0,
"max": 150,
"dimension": 2,
"inRange": {
"color": [
"#50a3ba",
"#eac736",
"#d94e5d"
]
}
},
"parallel": {
"left": "5%",
"right": "18%",
"bottom": 100,
"parallelAxisDefault": {
"type": "value",
"name": "AQI指数",
"nameLocation": "end",
"nameGap": 20,
"nameTextStyle": {
"color": "#fff",
"fontSize": 12
},
"axisLine": {
"lineStyle": {
"color": "#aaa"
}
},
"axisTick": {
"lineStyle": {
"color": "#777"
}
},
"splitLine": {
"show": false
},
"axisLabel": {
"textStyle": {
"color": "#fff"
}
}
}
},
"series": [
{
"name": "北京",
"type": "parallel",
"lineStyle": {
"normal": {
"width": 1,
"opacity": 0.5
}
},
"data": [
[
1,
55,
9,
56,
0.46,
18,
6,
"良"
],
[
2,
25,
11,
21,
0.65,
34,
9,
"优"
],
[
3,
56,
7,
63,
0.3,
14,
5,
"良"
],
[
4,
33,
7,
29,
0.33,
16,
6,
"优"
],
[
5,
42,
24,
44,
0.76,
40,
16,
"优"
]
]
},
{
"name": "上海",
"type": "parallel",
"lineStyle": {
"normal": {
"width": 1,
"opacity": 0.5
}
},
"data": [
[
1,
91,
45,
125,
0.82,
34,
23,
"良"
],
[
2,
65,
27,
78,
0.86,
45,
29,
"良"
],
[
3,
83,
60,
84,
1.09,
73,
27,
"良"
],
[
4,
109,
81,
121,
1.28,
68,
51,
"轻度污染"
],
[
5,
106,
77,
114,
1.07,
55,
51,
"轻度污染"
]
]
},
{
"name": "广州",
"type": "parallel",
"lineStyle": {
"normal": {
"width": 1,
"opacity": 0.5
}
},
"data": [
[
1,
26,
37,
27,
1.163,
27,
13,
"优"
],
[
2,
85,
62,
71,
1.195,
60,
8,
"良"
],
[
3,
78,
38,
74,
1.363,
37,
7,
"良"
],
[
4,
21,
21,
36,
0.634,
40,
9,
"优"
],
[
5,
41,
42,
46,
0.915,
81,
13,
"优"
]
]
}
]
}
json
{
"title": {
"text": "北京-上海-广州空气指数"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"position": "top"
},
"backgroundColor": "#333",
"legend": {
"bottom": 30,
"data": [
"北京",
"上海",
"广州"
],
"itemGap": 20,
"textStyle": {
"color": "#fff",
"fontSize": 14
}
},
"tooltip": {
"padding": 10,
"backgroundColor": "#222",
"borderColor": "#777",
"borderWidth": 1
},
"parallelAxis": [
{
"dim": 0,
"name": "日期",
"inverse": true,
"max": 31,
"nameLocation": "start"
},
{
"dim": 1,
"name": "AQI"
},
{
"dim": 2,
"name": "PM2.5"
},
{
"dim": 3,
"name": "PM10"
},
{
"dim": 4,
"name": " CO"
},
{
"dim": 5,
"name": "NO2"
},
{
"dim": 6,
"name": "SO2"
},
{
"dim": 7,
"name": "等级",
"type": "category",
"data": [
"优",
"良",
"轻度污染",
"中度污染",
"重度污染",
"严重污染"
]
}
],
"visualMap": {
"show": true,
"min": 0,
"max": 150,
"dimension": 2,
"inRange": {
"color": [
"#50a3ba",
"#eac736",
"#d94e5d"
]
}
},
"parallel": {
"left": "5%",
"right": "18%",
"bottom": 100,
"parallelAxisDefault": {
"type": "value",
"name": "AQI指数",
"nameLocation": "end",
"nameGap": 20,
"nameTextStyle": {
"color": "#fff",
"fontSize": 12
},
"axisLine": {
"lineStyle": {
"color": "#aaa"
}
},
"axisTick": {
"lineStyle": {
"color": "#777"
}
},
"splitLine": {
"show": false
},
"axisLabel": {
"textStyle": {
"color": "#fff"
}
}
}
},
"series": [
{
"name": "北京",
"type": "parallel",
"lineStyle": {
"normal": {
"width": 1,
"opacity": 0.5
}
},
"data": [
[
1,
55,
9,
56,
0.46,
18,
6,
"良"
],
[
2,
25,
11,
21,
0.65,
34,
9,
"优"
],
[
3,
56,
7,
63,
0.3,
14,
5,
"良"
],
[
4,
33,
7,
29,
0.33,
16,
6,
"优"
],
[
5,
42,
24,
44,
0.76,
40,
16,
"优"
]
]
},
{
"name": "上海",
"type": "parallel",
"lineStyle": {
"normal": {
"width": 1,
"opacity": 0.5
}
},
"data": [
[
1,
91,
45,
125,
0.82,
34,
23,
"良"
],
[
2,
65,
27,
78,
0.86,
45,
29,
"良"
],
[
3,
83,
60,
84,
1.09,
73,
27,
"良"
],
[
4,
109,
81,
121,
1.28,
68,
51,
"轻度污染"
],
[
5,
106,
77,
114,
1.07,
55,
51,
"轻度污染"
]
]
},
{
"name": "广州",
"type": "parallel",
"lineStyle": {
"normal": {
"width": 1,
"opacity": 0.5
}
},
"data": [
[
1,
26,
37,
27,
1.163,
27,
13,
"优"
],
[
2,
85,
62,
71,
1.195,
60,
8,
"良"
],
[
3,
78,
38,
74,
1.363,
37,
7,
"良"
],
[
4,
21,
21,
36,
0.634,
40,
9,
"优"
],
[
5,
41,
42,
46,
0.915,
81,
13,
"优"
]
]
}
]
}
上一篇 markdown 由简入繁，上手跟我做（二十二）echarts 图表 - 旭日图
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（二十四）echarts 图表 - 桑基图