markdown 由简入繁，上手跟我做（二十九）echarts 图表 - 日历坐标系
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": { },
"calendar": {
"top": "middle",
"left": "center",
"orient": "vertical",
"cellSize": 40,
"yearLabel": {
"margin": 50,
"textStyle": {
"fontSize": 30
}
},
"dayLabel": {
"firstDay": 1,
"nameMap": "cn"
},
"monthLabel": {
"nameMap": "cn",
"margin": 15,
"textStyle": {
"fontSize": 20,
"color": "#999"
}
},
"range": [
"2017-02",
"2017-03-31"
]
},
"visualMap": {
"min": 0,
"max": 1000,
"type": "piecewise",
"left": "center",
"bottom": 20,
"inRange": {
"color": [
"#5291FF",
"#C7DBFF"
]
},
"seriesIndex": [
1
],
"orient": "horizontal"
},
"series": [
{
"type": "graph",
"edgeSymbol": [
"none",
"arrow"
],
"coordinateSystem": "calendar",
"links": [
{
"source": 0,
"target": 1
},
{
"source": 1,
"target": 2
},
{
"source": 2,
"target": 3
},
{
"source": 3,
"target": 4
},
{
"source": 4,
"target": 5
},
{
"source": 5,
"target": 6
}
],
"symbolSize": 15,
"calendarIndex": 0,
"itemStyle": {
"normal": {
"color": "yellow",
"shadowBlue": 9,
"shadowOffsetX": 1.5,
"shadowOffsetY": 3,
"shadowColor": "#555"
}
},
"lineStyle": {
"normal": {
"color": "#D10E00",
"width": 1,
"opacity": 1
}
},
"data": [
[
1485878400000,
260
],
[
1486137600000,
200
],
[
1486569600000,
279
],
[
1486915200000,
847
],
[
1487347200000,
241
],
[
1489075200000,
411
],
[
1490112000000,
985
]
],
"z": 20
},
{
"type": "heatmap",
"coordinateSystem": "calendar",
"data": [
[
"2017-02-01",
397
],
[
"2017-02-02",
586
],
[
"2017-02-03",
670
],
[
"2017-02-04",
797
],
[
"2017-02-05",
499
],
[
"2017-02-06",
580
],
[
"2017-02-07",
758
],
[
"2017-02-08",
47
],
[
"2017-02-09",
193
],
[
"2017-02-10",
147
],
[
"2017-02-11",
708
],
[
"2017-02-12",
995
],
[
"2017-02-13",
367
],
[
"2017-02-14",
961
],
[
"2017-02-15",
936
],
[
"2017-02-16",
371
],
[
"2017-02-17",
552
],
[
"2017-02-18",
812
],
[
"2017-02-19",
296
],
[
"2017-02-20",
186
],
[
"2017-02-21",
527
],
[
"2017-02-22",
335
],
[
"2017-02-23",
929
],
[
"2017-02-24",
509
],
[
"2017-02-25",
325
],
[
"2017-02-26",
895
],
[
"2017-02-27",
602
],
[
"2017-02-28",
898
],
[
"2017-03-01",
929
],
[
"2017-03-02",
869
],
[
"2017-03-03",
304
],
[
"2017-03-04",
5
],
[
"2017-03-05",
283
],
[
"2017-03-06",
961
],
[
"2017-03-07",
457
],
[
"2017-03-08",
232
],
[
"2017-03-09",
245
],
[
"2017-03-10",
297
],
[
"2017-03-11",
790
],
[
"2017-03-12",
187
],
[
"2017-03-13",
575
],
[
"2017-03-14",
109
],
[
"2017-03-15",
860
],
[
"2017-03-16",
856
],
[
"2017-03-17",
35
],
[
"2017-03-18",
276
],
[
"2017-03-19",
845
],
[
"2017-03-20",
164
],
[
"2017-03-21",
945
],
[
"2017-03-22",
319
],
[
"2017-03-23",
884
],
[
"2017-03-24",
251
],
[
"2017-03-25",
229
],
[
"2017-03-26",
929
],
[
"2017-03-27",
465
],
[
"2017-03-28",
653
],
[
"2017-03-29",
645
],
[
"2017-03-30",
556
],
[
"2017-03-31",
772
]
]
}
]
}
json
{
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": { },
"calendar": {
"top": "middle",
"left": "center",
"orient": "vertical",
"cellSize": 40,
"yearLabel": {
"margin": 50,
"textStyle": {
"fontSize": 30
}
},
"dayLabel": {
"firstDay": 1,
"nameMap": "cn"
},
"monthLabel": {
"nameMap": "cn",
"margin": 15,
"textStyle": {
"fontSize": 20,
"color": "#999"
}
},
"range": [
"2017-02",
"2017-03-31"
]
},
"visualMap": {
"min": 0,
"max": 1000,
"type": "piecewise",
"left": "center",
"bottom": 20,
"inRange": {
"color": [
"#5291FF",
"#C7DBFF"
]
},
"seriesIndex": [
1
],
"orient": "horizontal"
},
"series": [
{
"type": "graph",
"edgeSymbol": [
"none",
"arrow"
],
"coordinateSystem": "calendar",
"links": [
{
"source": 0,
"target": 1
},
{
"source": 1,
"target": 2
},
{
"source": 2,
"target": 3
},
{
"source": 3,
"target": 4
},
{
"source": 4,
"target": 5
},
{
"source": 5,
"target": 6
}
],
"symbolSize": 15,
"calendarIndex": 0,
"itemStyle": {
"normal": {
"color": "yellow",
"shadowBlue": 9,
"shadowOffsetX": 1.5,
"shadowOffsetY": 3,
"shadowColor": "#555"
}
},
"lineStyle": {
"normal": {
"color": "#D10E00",
"width": 1,
"opacity": 1
}
},
"data": [
[
1485878400000,
260
],
[
1486137600000,
200
],
[
1486569600000,
279
],
[
1486915200000,
847
],
[
1487347200000,
241
],
[
1489075200000,
411
],
[
1490112000000,
985
]
],
"z": 20
},
{
"type": "heatmap",
"coordinateSystem": "calendar",
"data": [
[
"2017-02-01",
397
],
[
"2017-02-02",
586
],
[
"2017-02-03",
670
],
[
"2017-02-04",
797
],
[
"2017-02-05",
499
],
[
"2017-02-06",
580
],
[
"2017-02-07",
758
],
[
"2017-02-08",
47
],
[
"2017-02-09",
193
],
[
"2017-02-10",
147
],
[
"2017-02-11",
708
],
[
"2017-02-12",
995
],
[
"2017-02-13",
367
],
[
"2017-02-14",
961
],
[
"2017-02-15",
936
],
[
"2017-02-16",
371
],
[
"2017-02-17",
552
],
[
"2017-02-18",
812
],
[
"2017-02-19",
296
],
[
"2017-02-20",
186
],
[
"2017-02-21",
527
],
[
"2017-02-22",
335
],
[
"2017-02-23",
929
],
[
"2017-02-24",
509
],
[
"2017-02-25",
325
],
[
"2017-02-26",
895
],
[
"2017-02-27",
602
],
[
"2017-02-28",
898
],
[
"2017-03-01",
929
],
[
"2017-03-02",
869
],
[
"2017-03-03",
304
],
[
"2017-03-04",
5
],
[
"2017-03-05",
283
],
[
"2017-03-06",
961
],
[
"2017-03-07",
457
],
[
"2017-03-08",
232
],
[
"2017-03-09",
245
],
[
"2017-03-10",
297
],
[
"2017-03-11",
790
],
[
"2017-03-12",
187
],
[
"2017-03-13",
575
],
[
"2017-03-14",
109
],
[
"2017-03-15",
860
],
[
"2017-03-16",
856
],
[
"2017-03-17",
35
],
[
"2017-03-18",
276
],
[
"2017-03-19",
845
],
[
"2017-03-20",
164
],
[
"2017-03-21",
945
],
[
"2017-03-22",
319
],
[
"2017-03-23",
884
],
[
"2017-03-24",
251
],
[
"2017-03-25",
229
],
[
"2017-03-26",
929
],
[
"2017-03-27",
465
],
[
"2017-03-28",
653
],
[
"2017-03-29",
645
],
[
"2017-03-30",
556
],
[
"2017-03-31",
772
]
]
}
]
}
上一篇 markdown 由简入繁，上手跟我做（二十八）echarts 图表 - 主题河流图
markdown 教程（目录）