介于前一段時間做了省市地圖跳轉的東西,遇到了一些問題,如今做下總結,希望日后可以用到,也可以幫到遇到同樣問題的朋友。
前提:Echarts3.0(其他版本不知道情況是否相同)
一、數據準備
1、各省份對應的數據;
2、各城市對應的數據;
二、地圖js下載
1、http://echarts.baidu.com/download-map.html
此頁面提供了中國地圖、世界地圖、各省地圖的下載,支持js、json兩種格式,當前采用js格式。
2、省市跳轉,需要用到中國地圖、各省地圖,將其下載到本地,引用到自己的頁面。
三、數據展示
1、頁面引用了Echarts工具js和地圖js后,需要添加幾行代碼:
<script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/map' ] ); </script>2、其次頁面創建一片區域供實例展示:
<div style="border-style:solid; border-width:1px; border-color:#ccc;margin-top: 10px;background-color: #F4F4F4;"> <!-- 為ECharts準備一個具備大小(寬高)的Dom --> <div id="main" style="height:600px;margin-top: 20px;"></div></div>3、js文件中,查詢數據并進行圖表初始化:
$.Ajax({ type : "post", url : "../../componentsStatistics/componentsPRvncGatherStatistics.do?"+params, dataType : 'json', async : false,//設置為同步操作就可以給全局變量賦值成功 success : function(data) { optionData = data.rows[0]; } }); myChart = echarts.init(document.getElementById('main')); componentPrvncStatistic(myChart,optionData);4、下面對componentPrvncStatistic方法進行說明:1)數據接收、設置數據默認最大值
//數據準備var seriesData = optionData.seriesData;//設置默認值為100var maxFunnelValue = getMaxDataValue(seriesData);if (maxFunnelValue==null || maxFunnelValue=="") { maxFunnelValue = 100;}2)注冊配置以及事件,省名稱列表初始化,省名稱要是以下形式,省份地圖才會展示,需要做好配對。var ecConfig = require('echarts/config'); var zrEvent = require('zrender/tool/event'); var curIndx = 0; var flag = true; var mapType = [ 'china', // 23個省 '廣東', '青海', '四川', '海南', '陜西', '甘肅', '云南', '湖南', '湖北', '黑龍江', '貴州', '山東', '江西', '河南', '河北', '山西', '安徽', '福建', '浙江', '江蘇', '吉林', '遼寧', '臺灣', // 5個自治區 '新疆', '廣西', '寧夏', '內蒙古', '西藏', // 4個直轄市 '北京', '天津', '上海', '重慶', // 2個特別行政區 '香港', '澳門' ];3)點擊某個省份時,對于城市名稱比較密集的省份,屏蔽名稱展示(如果有好的解決方法,歡迎留言,感謝!)myChart.on('click', function (param){ var len = mapType.length; var mt = mapType[curIndx % len]; if (mt == 'china') { // 全國選擇時指定到選中的省份 var selected = param.name; for (var i = 0 ; i<len ; i++) { if (selected) { flag = true; mt = selected; if(mt=="海南"||mt=="北京"||mt=="天津"||mt=="重慶"||mt=="上海" ){ flag = false; } while (len--) { if (mapType[len] == mt) { curIndx = len; } } break; } } } else { flag = true; curIndx = 0; mt = 'china'; } option.series[0].mapType = mt; option.series[0].itemStyle.normal.label.show = flag ; myChart.setOption(option); });4)option準備option = { title: { text : '采集省統計' //圖表標題名稱// subtext : '(點擊切換)' //副標題 }, tooltip : { trigger: 'item' }, legend: { orient: 'vertical', x:'right', data:['采集數量(個)'] }, dataRange: { min: 0, max: maxFunnelValue, color:['#4198E6','#E0FFFF'], //端值對應的顏色 text:['高','低'], // 文本,默認為數值文本 calculable : true }, color:['#2ECBCA','#B6A2DF','#59B1F0','#FFB880','#87CEFA'], //圖例的顏色 toolbox: { show: true, orient : 'vertical', x: 'right', y: 'center', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, series : [ { name: '采集數量(個)', type: 'map', mapType: 'china', selectedMode : 'single', itemStyle:{ normal:{label:{show:flag}}, //地圖初始化城市名稱是否展示 emphasis:{label:{show:true}} //鼠標移入城市名稱是否展示 }, data:function(){ var serie=[]; var data = seriesData[0].dataArray; for(var i=0;i<data.length;i++){ var item = {name:data[i].name, value:data[i].value }; serie.push(item); } return serie; }() //此處的括號不可省略 } ] };5)setmyChart.setOption(option); window.onresize = myChart.resize;以上是整個流程的概要說明,其中有很多地方有不足之處,還請批評指正!初學者可以參考思路,結合官方的Demo進行使用。
5、結果展示:
1)全國地圖展示:
2)某個省份
新聞熱點
疑難解答