地图注册方式：
$.get('../mapData/json/JsonMap/' + sjqx + '.json', function (chinaJson) {
echarts.registerMap(sjqx, chinaJson); //注册地图
var mapChart_j7tkqzlbhqk = echarts.init(document.getElementById('main'));
});
方案一：option配置信息
var option = {
"timeline": {
"data": [
"2017-10-30",
"2017-10-29",
"2017-10-28",
"2017-10-27",
"2017-10-26",
"2017-10-25",
"2017-10-24"
],
"autoPlay": true,
"axisType": "category",
"playInterval": 3000,
"x": "22%",
"width": "75%",
"padding": 5,
"inverse": false,
"lineStyle": {
"color": "#1197D1",
"width": 4,
"type": "solid",
"opacity": 0.7
},
"label": {
"show": true,
"interval": "0",
"rotate": 0,
"color": "#FFF",
"fontSize": 10,
"fontWeight": "normal",
"emphasis": {
"color": "#FFF"
}
},
"controlStyle": {
"showPrevBtn": false,
"showNextBtn": false,
"position": "right",
"normal": {
"color": "#FFF",
"borderColor": "#FFF",
"borderWidth": 2
},
"emphasis": {
"color": "#FFF",
"borderColor": "#FFF",
"borderWidth": 2
}
},
"checkpointStyle": {
"symbolSize": 20,
"color": "#00BCFF",
"opacity": 0.5,
"borderColor": "#0961A4",
"borderWidth": 6
}
},
"options": [
{
"backgroundColor": "#09113E",
"title": {
"show": false,
"text": "2017-10-30AQI情况分布",
"textStyle": {
"color": "#fff",
"fontSize": 14
}
},
"tooltip": {
"show": true,
"backgroundColor": "#F7F9FB",
"borderColor": "#92DAFF",
"borderWidth": "1px",
"textStyle": {
"color": "#000"
}
},
"legend": {
"orient": "vertical",
"x": "left",
"textStyle": {
"color": "red",
"fontSize": 14
},
"data": []
},
"dataRange": {
"backgroundColor": "#08214E",
"borderColor": "#103B70",
"borderWidth": 1,
"padding": 10,
"x": "left",
"y": "bottom",
"splitList": [
{
"start": 0,
"end": 51,
"label": "优",
"color": "#6CCC06"
},
{
"start": 51,
"end": 100,
"label": "良",
"color": "#FBD029"
},
{
"start": 101,
"end": 150,
"label": "轻度污染",
"color": "#FE8800"
},
{
"start": 151,
"end": 200,
"label": "中度污染",
"color": "#FE0000"
},
{
"start": 201,
"end": 300,
"label": "重度污染",
"color": "#970454"
},
{
"start": 300,
"label": "严重污染",
"color": "#62001E"
}
],
"textStyle": {
"color": "#B0D0ED",
"fontSize": 12
},
"inRange": {
"color": [
"#1B9CFF",
"#89FF32",
"#FFF332",
"#FF9C32",
"#FF3B52"
],
"opacity": 0.9,
"symbolSize": [
35
]
}
},
"geo": {
"show": true,
"map": "450000",
"zoom": 1.3,
"left": "30%",
"top": "10%",
"aspectScale": 1,
"roam": true,
"label": {
"normal": {
"show": true,
"textStyle": {
"color": "#FFF"
}
},
"emphasis": {
"show": true,
"textStyle": {
"color": "#FFF"
}
}
},
"itemStyle": {
"normal": {
"borderColor": "#285DC8",
"borderWidth": 1,
"areaColor": "#274073",
"label": {
"show": true,
"textStyle": {
"color": "#FFF"
}
}
},
"emphasis": {
"areaColor": "#2a333d",
"label": {
"show": true,
"textStyle": {
"color": "#FFF"
}
}
}
}
},
"series": [
{
"name": "AQI:",
"type": "scatter",
"coordinateSystem": "geo",
"mapType": "450000",
"data": [
{
"name": "南宁市",
"value": [
"108.33626390000001",
"22.954142999999998",
"65"
]
},
{
"name": "柳州市",
"value": [
"109.4028",
"24.69689",
"80"
]
},
{
"name": "桂林市",
"value": [
"110.2867",
"25.281880000000001",
"101"
]
},
{
"name": "梧州市",
"value": [
"111.20589999999999",
"23.486619999999998",
"85"
]
},
{
"name": "北海市",
"value": [
"109.34120000000001",
"21.589800000000001",
"70"
]
},
{
"name": "防城港市",
"value": [
"108.051",
"21.949870000000001",
"77"
]
},
{
"name": "钦州市",
"value": [
"109.21920000000001",
"21.949870000000001",
"79"
]
},
{
"name": "玉林市",
"value": [
"110.10149999999999",
"22.631900000000002",
"77"
]
},
{
"name": "百色市",
"value": [
"106.6121",
"23.901579999999999",
"62"
]
},
{
"name": "贺州市",
"value": [
"111.55",
"24.420000000000002",
"100"
]
},
{
"name": "河池市",
"value": [
"108.05159999999999",
"24.69689",
"71"
]
},
{
"name": "来宾市",
"value": [
"109.23",
"23.73",
"91"
]
},
{
"name": "崇左市",
"value": [
"107.37",
"22.399999999999999",
"74"
]
}
],
"zoom": 1.4,
"layoutCenter": [
"50%",
"50%"
],
"layoutSize": 260,
"roam": true,
"itemStyle": {
"normal": {
"borderColor": "#285DC8",
"borderWidth": 1,
"areaColor": "#274073",
"label": {
"show": true,
"textStyle": {
"color": "#F4FDF0"
}
}
},
"emphasis": {
"label": {
"show": true,
"textStyle": {
"color": "#F4FDF0"
}
}
}
}
}
]
},
{
"title": {
"text": "2017-10-29AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": [
"108.33626390000001",
"22.954142999999998",
"65"
]
},
{
"name": "柳州市",
"value": [
"109.4028",
"24.69689",
"72"
]
},
{
"name": "桂林市",
"value": [
"110.2867",
"25.281880000000001",
"76"
]
},
{
"name": "梧州市",
"value": [
"111.20589999999999",
"23.486619999999998",
"84"
]
},
{
"name": "北海市",
"value": [
"109.34120000000001",
"21.589800000000001",
"74"
]
},
{
"name": "防城港市",
"value": [
"108.051",
"21.949870000000001",
"82"
]
},
{
"name": "钦州市",
"value": [
"109.21920000000001",
"21.949870000000001",
"86"
]
},
{
"name": "玉林市",
"value": [
"110.10149999999999",
"22.631900000000002",
"89"
]
},
{
"name": "百色市",
"value": [
"106.6121",
"23.901579999999999",
"66"
]
},
{
"name": "贺州市",
"value": [
"111.55",
"24.420000000000002",
"91"
]
},
{
"name": "河池市",
"value": [
"108.05159999999999",
"24.69689",
"62"
]
},
{
"name": "来宾市",
"value": [
"109.23",
"23.73",
"75"
]
},
{
"name": "崇左市",
"value": [
"107.37",
"22.399999999999999",
"65"
]
}
]
}
]
},
{
"title": {
"text": "2017-10-28AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": [
"108.33626390000001",
"22.954142999999998",
"91"
]
},
{
"name": "柳州市",
"value": [
"109.4028",
"24.69689",
"69"
]
},
{
"name": "桂林市",
"value": [
"110.2867",
"25.281880000000001",
"82"
]
},
{
"name": "梧州市",
"value": [
"111.20589999999999",
"23.486619999999998",
"91"
]
},
{
"name": "北海市",
"value": [
"109.34120000000001",
"21.589800000000001",
"102"
]
},
{
"name": "防城港市",
"value": [
"108.051",
"21.949870000000001",
"98"
]
},
{
"name": "钦州市",
"value": [
"109.21920000000001",
"21.949870000000001",
"104"
]
},
{
"name": "玉林市",
"value": [
"110.10149999999999",
"22.631900000000002",
"106"
]
},
{
"name": "百色市",
"value": [
"106.6121",
"23.901579999999999",
"56"
]
},
{
"name": "贺州市",
"value": [
"111.55",
"24.420000000000002",
"92"
]
},
{
"name": "河池市",
"value": [
"108.05159999999999",
"24.69689",
"67"
]
},
{
"name": "来宾市",
"value": [
"109.23",
"23.73",
"71"
]
},
{
"name": "崇左市",
"value": [
"107.37",
"22.399999999999999",
"75"
]
}
]
}
]
},
{
"title": {
"text": "2017-10-27AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": [
"108.33626390000001",
"22.954142999999998",
"103"
]
},
{
"name": "柳州市",
"value": [
"109.4028",
"24.69689",
"88"
]
},
{
"name": "桂林市",
"value": [
"110.2867",
"25.281880000000001",
"100"
]
},
{
"name": "梧州市",
"value": [
"111.20589999999999",
"23.486619999999998",
"110"
]
},
{
"name": "北海市",
"value": [
"109.34120000000001",
"21.589800000000001",
"107"
]
},
{
"name": "防城港市",
"value": [
"108.051",
"21.949870000000001",
"118"
]
},
{
"name": "钦州市",
"value": [
"109.21920000000001",
"21.949870000000001",
"115"
]
},
{
"name": "玉林市",
"value": [
"110.10149999999999",
"22.631900000000002",
"112"
]
},
{
"name": "百色市",
"value": [
"106.6121",
"23.901579999999999",
"44"
]
},
{
"name": "贺州市",
"value": [
"111.55",
"24.420000000000002",
"101"
]
},
{
"name": "河池市",
"value": [
"108.05159999999999",
"24.69689",
"75"
]
},
{
"name": "来宾市",
"value": [
"109.23",
"23.73",
"105"
]
},
{
"name": "崇左市",
"value": [
"107.37",
"22.399999999999999",
"89"
]
}
]
}
]
},
{
"title": {
"text": "2017-10-26AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": [
"108.33626390000001",
"22.954142999999998",
"119"
]
},
{
"name": "柳州市",
"value": [
"109.4028",
"24.69689",
"118"
]
},
{
"name": "桂林市",
"value": [
"110.2867",
"25.281880000000001",
"111"
]
},
{
"name": "梧州市",
"value": [
"111.20589999999999",
"23.486619999999998",
"115"
]
},
{
"name": "北海市",
"value": [
"109.34120000000001",
"21.589800000000001",
"76"
]
},
{
"name": "防城港市",
"value": [
"108.051",
"21.949870000000001",
"122"
]
},
{
"name": "钦州市",
"value": [
"109.21920000000001",
"21.949870000000001",
"126"
]
},
{
"name": "玉林市",
"value": [
"110.10149999999999",
"22.631900000000002",
"130"
]
},
{
"name": "百色市",
"value": [
"106.6121",
"23.901579999999999",
"89"
]
},
{
"name": "贺州市",
"value": [
"111.55",
"24.420000000000002",
"113"
]
},
{
"name": "河池市",
"value": [
"108.05159999999999",
"24.69689",
"100"
]
},
{
"name": "来宾市",
"value": [
"109.23",
"23.73",
"127"
]
},
{
"name": "崇左市",
"value": [
"107.37",
"22.399999999999999",
"108"
]
}
]
}
]
},
{
"title": {
"text": "2017-10-25AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": [
"108.33626390000001",
"22.954142999999998",
"114"
]
},
{
"name": "柳州市",
"value": [
"109.4028",
"24.69689",
"127"
]
},
{
"name": "桂林市",
"value": [
"110.2867",
"25.281880000000001",
"110"
]
},
{
"name": "梧州市",
"value": [
"111.20589999999999",
"23.486619999999998",
"101"
]
},
{
"name": "北海市",
"value": [
"109.34120000000001",
"21.589800000000001",
"109"
]
},
{
"name": "防城港市",
"value": [
"108.051",
"21.949870000000001",
"118"
]
},
{
"name": "钦州市",
"value": [
"109.21920000000001",
"21.949870000000001",
"128"
]
},
{
"name": "玉林市",
"value": [
"110.10149999999999",
"22.631900000000002",
"127"
]
},
{
"name": "百色市",
"value": [
"106.6121",
"23.901579999999999",
"102"
]
},
{
"name": "贺州市",
"value": [
"111.55",
"24.420000000000002",
"109"
]
},
{
"name": "河池市",
"value": [
"108.05159999999999",
"24.69689",
"95"
]
},
{
"name": "来宾市",
"value": [
"109.23",
"23.73",
"136"
]
},
{
"name": "崇左市",
"value": [
"107.37",
"22.399999999999999",
"101"
]
}
]
}
]
},
{
"title": {
"text": "2017-10-24AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": [
"108.33626390000001",
"22.954142999999998",
"86"
]
},
{
"name": "柳州市",
"value": [
"109.4028",
"24.69689",
"99"
]
},
{
"name": "桂林市",
"value": [
"110.2867",
"25.281880000000001",
"103"
]
},
{
"name": "梧州市",
"value": [
"111.20589999999999",
"23.486619999999998",
"94"
]
},
{
"name": "北海市",
"value": [
"109.34120000000001",
"21.589800000000001",
"78"
]
},
{
"name": "防城港市",
"value": [
"108.051",
"21.949870000000001",
"92"
]
},
{
"name": "钦州市",
"value": [
"109.21920000000001",
"21.949870000000001",
"95"
]
},
{
"name": "玉林市",
"value": [
"110.10149999999999",
"22.631900000000002",
"94"
]
},
{
"name": "百色市",
"value": [
"106.6121",
"23.901579999999999",
"66"
]
},
{
"name": "贺州市",
"value": [
"111.55",
"24.420000000000002",
"100"
]
},
{
"name": "河池市",
"value": [
"108.05159999999999",
"24.69689",
"69"
]
},
{
"name": "来宾市",
"value": [
"109.23",
"23.73",
"113"
]
},
{
"name": "崇左市",
"value": [
"107.37",
"22.399999999999999",
"75"
]
}
]
}
]
}
]
}方案一
效果图1：
方案二：
option配置信息：
{
"timeline": {
"data": [
"2017-10-30",
"2017-10-29",
"2017-10-28",
"2017-10-27",
"2017-10-26",
"2017-10-25",
"2017-10-24"
],
"autoPlay": true,
"axisType": "category",
"playInterval": 3000,
"x": "22%",
"width": "75%",
"padding": 5,
"inverse": false,
"lineStyle": {
"color": "#1197D1",
"width": 4,
"type": "solid",
"opacity": 0.7
},
"label": {
"show": true,
"interval": "0",
"rotate": 0,
"color": "#FFF",
"fontSize": 10,
"fontWeight": "normal",
"emphasis": {
"color": "#FFF"
}
},
"controlStyle": {
"showPrevBtn": false,
"showNextBtn": false,
"position": "right",
"normal": {
"color": "#FFF",
"borderColor": "#FFF",
"borderWidth": 2
},
"emphasis": {
"color": "#FFF",
"borderColor": "#FFF",
"borderWidth": 2
}
},
"checkpointStyle": {
"symbolSize": 20,
"color": "#00BCFF",
"opacity": 0.5,
"borderColor": "#0961A4",
"borderWidth": 6
}
},
"options": [
{
"backgroundColor": "#09113E",
"title": {
"show": false,
"text": "2017-10-30AQI情况分布",
"textStyle": {
"color": "#fff",
"fontSize": 14
}
},
"tooltip": {
"show": true,
"formatter": "{a} <br/>{b}: {c})",
"backgroundColor": "#F7F9FB",
"borderColor": "#92DAFF",
"borderWidth": "1px",
"textStyle": {
"color": "#000"
}
},
"legend": {
"orient": "vertical",
"x": "left",
"textStyle": {
"color": "red",
"fontSize": 14
},
"data": []
},
"dataRange": {
"backgroundColor": "#08214E",
"borderColor": "#103B70",
"borderWidth": 1,
"padding": 10,
"x": "left",
"y": "bottom",
"splitList": [
{
"start": 0,
"end": 51,
"label": "优",
"color": "#6CCC06"
},
{
"start": 51,
"end": 100,
"label": "良",
"color": "#FBD029"
},
{
"start": 101,
"end": 150,
"label": "轻度污染",
"color": "#FE8800"
},
{
"start": 151,
"end": 200,
"label": "中度污染",
"color": "#FE0000"
},
{
"start": 201,
"end": 300,
"label": "重度污染",
"color": "#970454"
},
{
"start": 300,
"label": "严重污染",
"color": "#62001E"
}
],
"textStyle": {
"color": "#B0D0ED",
"fontSize": 12
}
},
"series": [
{
"name": "AQI:",
"type": "map",
"mapType": "450000",
"data": [
{
"name": "南宁市",
"value": 65
},
{
"name": "柳州市",
"value": 80
},
{
"name": "桂林市",
"value": 101
},
{
"name": "梧州市",
"value": 85
},
{
"name": "北海市",
"value": 70
},
{
"name": "防城港市",
"value": 77
},
{
"name": "钦州市",
"value": 79
},
{
"name": "玉林市",
"value": 77
},
{
"name": "百色市",
"value": 62
},
{
"name": "贺州市",
"value": 100
},
{
"name": "河池市",
"value": 71
},
{
"name": "来宾市",
"value": 91
},
{
"name": "崇左市",
"value": 74
}
],
"zoom": 1.4,
"layoutCenter": [
"50%",
"50%"
],
"layoutSize": 260,
"roam": true,
"itemStyle": {
"normal": {
"borderColor": "#285DC8",
"borderWidth": 1,
"areaColor": "#274073",
"label": {
"show": true,
"textStyle": {
"color": "#F4FDF0"
}
}
},
"emphasis": {
"label": {
"show": true,
"textStyle": {
"color": "#F4FDF0"
}
}
}
}
}
]
},
{
"title": {
"text": "2017-10-29AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": 65
},
{
"name": "柳州市",
"value": 72
},
{
"name": "桂林市",
"value": 76
},
{
"name": "梧州市",
"value": 84
},
{
"name": "北海市",
"value": 74
},
{
"name": "防城港市",
"value": 82
},
{
"name": "钦州市",
"value": 86
},
{
"name": "玉林市",
"value": 89
},
{
"name": "百色市",
"value": 66
},
{
"name": "贺州市",
"value": 91
},
{
"name": "河池市",
"value": 62
},
{
"name": "来宾市",
"value": 75
},
{
"name": "崇左市",
"value": 65
}
]
}
]
},
{
"title": {
"text": "2017-10-28AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": 91
},
{
"name": "柳州市",
"value": 69
},
{
"name": "桂林市",
"value": 82
},
{
"name": "梧州市",
"value": 91
},
{
"name": "北海市",
"value": 102
},
{
"name": "防城港市",
"value": 98
},
{
"name": "钦州市",
"value": 104
},
{
"name": "玉林市",
"value": 106
},
{
"name": "百色市",
"value": 56
},
{
"name": "贺州市",
"value": 92
},
{
"name": "河池市",
"value": 67
},
{
"name": "来宾市",
"value": 71
},
{
"name": "崇左市",
"value": 75
}
]
}
]
},
{
"title": {
"text": "2017-10-27AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": 103
},
{
"name": "柳州市",
"value": 88
},
{
"name": "桂林市",
"value": 100
},
{
"name": "梧州市",
"value": 110
},
{
"name": "北海市",
"value": 107
},
{
"name": "防城港市",
"value": 118
},
{
"name": "钦州市",
"value": 115
},
{
"name": "玉林市",
"value": 112
},
{
"name": "百色市",
"value": 44
},
{
"name": "贺州市",
"value": 101
},
{
"name": "河池市",
"value": 75
},
{
"name": "来宾市",
"value": 105
},
{
"name": "崇左市",
"value": 89
}
]
}
]
},
{
"title": {
"text": "2017-10-26AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": 119
},
{
"name": "柳州市",
"value": 118
},
{
"name": "桂林市",
"value": 111
},
{
"name": "梧州市",
"value": 115
},
{
"name": "北海市",
"value": 76
},
{
"name": "防城港市",
"value": 122
},
{
"name": "钦州市",
"value": 126
},
{
"name": "玉林市",
"value": 130
},
{
"name": "百色市",
"value": 89
},
{
"name": "贺州市",
"value": 113
},
{
"name": "河池市",
"value": 100
},
{
"name": "来宾市",
"value": 127
},
{
"name": "崇左市",
"value": 108
}
]
}
]
},
{
"title": {
"text": "2017-10-25AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": 114
},
{
"name": "柳州市",
"value": 127
},
{
"name": "桂林市",
"value": 110
},
{
"name": "梧州市",
"value": 101
},
{
"name": "北海市",
"value": 109
},
{
"name": "防城港市",
"value": 118
},
{
"name": "钦州市",
"value": 128
},
{
"name": "玉林市",
"value": 127
},
{
"name": "百色市",
"value": 102
},
{
"name": "贺州市",
"value": 109
},
{
"name": "河池市",
"value": 95
},
{
"name": "来宾市",
"value": 136
},
{
"name": "崇左市",
"value": 101
}
]
}
]
},
{
"title": {
"text": "2017-10-24AQI情况分布"
},
"series": [
{
"data": [
{
"name": "南宁市",
"value": 86
},
{
"name": "柳州市",
"value": 99
},
{
"name": "桂林市",
"value": 103
},
{
"name": "梧州市",
"value": 94
},
{
"name": "北海市",
"value": 78
},
{
"name": "防城港市",
"value": 92
},
{
"name": "钦州市",
"value": 95
},
{
"name": "玉林市",
"value": 94
},
{
"name": "百色市",
"value": 66
},
{
"name": "贺州市",
"value": 100
},
{
"name": "河池市",
"value": 69
},
{
"name": "来宾市",
"value": 113
},
{
"name": "崇左市",
"value": 75
}
]
}
]
}
]
}
请您注意
·自觉遵守：爱国、守法、自律、真实、文明的原则
·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品，NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款
