地图注册方式:
$.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有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款