介于前一段时间做了省市地图跳转的东西,遇到了一些问题,如今做下总结,希望日后可以用到,也可以帮到遇到同样问题的朋友。
前提: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)某个省份
新闻热点
疑难解答