markdown 由简入繁，上手跟我做（十二）echarts 图表 - 散点（气泡）图
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"tooltip": {
"trigger": "axis",
"axisPointer": {
"show": true,
"type": "cross",
"lineStyle": {
"type": "dashed",
"width": 1
}
}
},
"legend": {
"data": [
"scatter1",
"scatter2"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": true,
"xAxis": { },
"yAxis": { },
"series": [
{
"symbolSize": 20,
"data": [
[
10,
8.04
],
[
8,
6.95
],
[
13,
7.58
],
[
9,
8.81
],
[
11,
8.33
],
[
14,
9.96
],
[
6,
7.24
],
[
4,
4.26
],
[
12,
10.84
],
[
7,
4.82
],
[
5,
5.68
]
],
"type": "scatter"
}
]
}
json
{
"tooltip": {
"trigger": "axis",
"axisPointer": {
"show": true,
"type": "cross",
"lineStyle": {
"type": "dashed",
"width": 1
}
}
},
"legend": {
"data": [
"scatter1",
"scatter2"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": true,
"xAxis": { },
"yAxis": { },
"series": [
{
"symbolSize": 20,
"data": [
[
10,
8.04
],
[
8,
6.95
],
[
13,
7.58
],
[
9,
8.81
],
[
11,
8.33
],
[
14,
9.96
],
[
6,
7.24
],
[
4,
4.26
],
[
12,
10.84
],
[
7,
4.82
],
[
5,
5.68
]
],
"type": "scatter"
}
]
}
示例 2
效果
{
"tooltip": {
"trigger": "axis",
"axisPointer": {
"show": true,
"type": "cross",
"lineStyle": {
"type": "dashed",
"width": 1
}
}
},
"legend": {
"data": [
"scatter1",
"scatter2"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": true,
"xAxis": [
{
"type": "value"
}
],
"yAxis": [
{
"type": "value"
}
],
"series": [
{
"name": "scatter1",
"type": "scatter",
"symbol": "emptyCircle",
"itemStyle": {
"normal": {
"color": "lightblue",
"borderWidth": 4,
"label": {
"show": true
}
},
"emphasis": {
"color": "lightgreen"
}
},
"data": [
[
0.7,
9.43,
6.64
],
[
0.92,
9.31,
1.58
],
[
0.58,
5.06,
8.83
],
[
5.48,
9.91,
9.85
],
[
6.31,
9.7,
4.09
],
[
0.17,
7.29,
6.06
],
[
1.31,
9.14,
5.05
],
[
5.91,
4.82,
9.2
],
[
2.23,
5.97,
2.21
],
[
6.54,
5.53,
6.51
],
[
5.46,
5.28,
0.19
],
[
7.06,
8.3,
9.46
],
[
1.81,
4.38,
8.51
],
[
5.85,
4.37,
0.8
],
[
3.37,
2.95,
9.71
],
[
6.9,
0.54,
5.49
],
[
1.85,
3.76,
3.44
],
[
9.41,
8.36,
5.38
],
[
2.06,
4.65,
3.16
],
[
2,
6.74,
6.11
]
],
"markPoint": {
"data": [
{
"type": "max",
"name": "y最大值"
},
{
"type": "min",
"name": "y最小值"
},
{
"type": "max",
"name": "x最大值",
"valueIndex": 0,
"symbol": "arrow",
"itemStyle": {
"normal": {
"borderColor": "red"
}
}
},
{
"type": "min",
"name": "x最小值",
"valueIndex": 0,
"symbol": "arrow",
"itemStyle": {
"normal": {
"borderColor": "red"
}
}
}
]
},
"markLine": {
"data": [
{
"type": "average",
"name": "y平均值"
},
{
"type": "average",
"name": "x平均值",
"valueIndex": 0,
"itemStyle": {
"normal": {
"borderColor": "red"
}
}
}
]
}
},
{
"name": "scatter2",
"type": "scatter",
"symbol": "image://../asset/ico/favicon.png",
"itemStyle": {
"emphasis": {
"label": {
"show": true
}
}
},
"data": [
[
8.33,
1.94,
8.12
],
[
0.55,
4.18,
4.4
],
[
7.25,
6.73,
5.73
],
[
8.05,
5.19,
2.04
],
[
7.71,
9.63,
3.98
],
[
3.86,
3.72,
4.78
],
[
5.78,
6.83,
6.63
],
[
2.68,
9.17,
9.73
],
[
3.44,
2.85,
3.15
],
[
4.41,
4.41,
1.62
],
[
7.27,
6.7,
3.84
],
[
2.88,
1.54,
6.17
],
[
8.52,
1.89,
7.92
],
[
5.42,
1.12,
3.63
],
[
0.72,
6.26,
4.43
],
[
4.04,
8.1,
6.69
],
[
4.86,
9.01,
0.57
],
[
9.2,
3.51,
7.3
],
[
3.89,
5.39,
0.18
],
[
6.68,
7.31,
1.37
],
{
"value": [
5,
5,
1000
],
"itemStyle": {
"normal": {
"borderWidth": 8,
"color": "orange"
},
"emphasis": {
"borderWidth": 10,
"color": "#ff4500"
}
},
"symbol": "emptyTriangle",
"symbolRotate": 90,
"symbolSize": 30
}
],
"markPoint": {
"symbol": "emptyCircle",
"itemStyle": {
"normal": {
"label": {
"position": "top"
}
}
},
"data": [
{
"name": "有个东西",
"value": 1000,
"xAxis": 5,
"yAxis": 5,
"symbolSize": 80
}
]
}
}
]
}
json
{
"tooltip": {
"trigger": "axis",
"axisPointer": {
"show": true,
"type": "cross",
"lineStyle": {
"type": "dashed",
"width": 1
}
}
},
"legend": {
"data": [
"scatter1",
"scatter2"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": true,
"xAxis": [
{
"type": "value"
}
],
"yAxis": [
{
"type": "value"
}
],
"series": [
{
"name": "scatter1",
"type": "scatter",
"symbol": "emptyCircle",
"itemStyle": {
"normal": {
"color": "lightblue",
"borderWidth": 4,
"label": {
"show": true
}
},
"emphasis": {
"color": "lightgreen"
}
},
"data": [
[
0.7,
9.43,
6.64
],
[
0.92,
9.31,
1.58
],
[
0.58,
5.06,
8.83
],
[
5.48,
9.91,
9.85
],
[
6.31,
9.7,
4.09
],
[
0.17,
7.29,
6.06
],
[
1.31,
9.14,
5.05
],
[
5.91,
4.82,
9.2
],
[
2.23,
5.97,
2.21
],
[
6.54,
5.53,
6.51
],
[
5.46,
5.28,
0.19
],
[
7.06,
8.3,
9.46
],
[
1.81,
4.38,
8.51
],
[
5.85,
4.37,
0.8
],
[
3.37,
2.95,
9.71
],
[
6.9,
0.54,
5.49
],
[
1.85,
3.76,
3.44
],
[
9.41,
8.36,
5.38
],
[
2.06,
4.65,
3.16
],
[
2,
6.74,
6.11
]
],
"markPoint": {
"data": [
{
"type": "max",
"name": "y最大值"
},
{
"type": "min",
"name": "y最小值"
},
{
"type": "max",
"name": "x最大值",
"valueIndex": 0,
"symbol": "arrow",
"itemStyle": {
"normal": {
"borderColor": "red"
}
}
},
{
"type": "min",
"name": "x最小值",
"valueIndex": 0,
"symbol": "arrow",
"itemStyle": {
"normal": {
"borderColor": "red"
}
}
}
]
},
"markLine": {
"data": [
{
"type": "average",
"name": "y平均值"
},
{
"type": "average",
"name": "x平均值",
"valueIndex": 0,
"itemStyle": {
"normal": {
"borderColor": "red"
}
}
}
]
}
},
{
"name": "scatter2",
"type": "scatter",
"symbol": "image://../asset/ico/favicon.png",
"itemStyle": {
"emphasis": {
"label": {
"show": true
}
}
},
"data": [
[
8.33,
1.94,
8.12
],
[
0.55,
4.18,
4.4
],
[
7.25,
6.73,
5.73
],
[
8.05,
5.19,
2.04
],
[
7.71,
9.63,
3.98
],
[
3.86,
3.72,
4.78
],
[
5.78,
6.83,
6.63
],
[
2.68,
9.17,
9.73
],
[
3.44,
2.85,
3.15
],
[
4.41,
4.41,
1.62
],
[
7.27,
6.7,
3.84
],
[
2.88,
1.54,
6.17
],
[
8.52,
1.89,
7.92
],
[
5.42,
1.12,
3.63
],
[
0.72,
6.26,
4.43
],
[
4.04,
8.1,
6.69
],
[
4.86,
9.01,
0.57
],
[
9.2,
3.51,
7.3
],
[
3.89,
5.39,
0.18
],
[
6.68,
7.31,
1.37
],
{
"value": [
5,
5,
1000
],
"itemStyle": {
"normal": {
"borderWidth": 8,
"color": "orange"
},
"emphasis": {
"borderWidth": 10,
"color": "#ff4500"
}
},
"symbol": "emptyTriangle",
"symbolRotate": 90,
"symbolSize": 30
}
],
"markPoint": {
"symbol": "emptyCircle",
"itemStyle": {
"normal": {
"label": {
"position": "top"
}
}
},
"data": [
{
"name": "有个东西",
"value": 1000,
"xAxis": 5,
"yAxis": 5,
"symbolSize": 80
}
]
}
}
]
}
上一篇 markdown 由简入繁，上手跟我做（十一）echarts 图表 - 柱状（条形）图
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（十三）echarts 图表 - K 线图