echart 扩展地图不显示问题
今天写项目需要一个安徽地图，但echart自带的安徽地图还是老版的，仍有巢湖市，但客户要求不能有，只好重新找，
后发现ECharts 地图数据在线生成工具 ：http://ecomfe.github.io/echarts-map-tool/ 生成的json文件安徽省是新版本的，就使用echart的扩展地图功能
照着
写了一遍总是echart.util报错，最后仔细找了下api。发现
最后这样写才没有错误显示。但是地图一直加载不出来。后面看里面的格式以为是自己下的json是压缩版的就勾掉了压缩准备先试试看是不是解码有问题
下载后发现数据好像是一样的，最后仔细观察居然都是93K，完全没有什么卵用~话说百度你是来搞笑的嘛~
没办法就在网上找啊找啊，找到很多说本地解析不了json，我就信了，重新建个项目，拖进去，运行~嚯~又白忙活了
那没办法啊，只能试试其他地图了，下了个中国地图，md居然可以！难道是安徽地图json炸了?然后我就试试钩去了，看看是不是这个问题
居然显示了
卧槽。和我想的一样。合肥也没了。。。
最后看了下json格式，又想了想前面的93k,发现很大可能是编码的问题。就想着解码下这个json
用这个方法一直报错，妈的只好在找api，发现这个和上面的格式是一样的就试了试
require('echarts/util/mapData/params').params.decode(data)
还是报错，最后就用js的decodeURI()试了试。还是不行~就在我要放弃的时候。一个不小心写成了
require('echarts/util/mapData/params').decode(data)
md !!!!!!!! 居然显示了
万恶的巢湖也没了，我的天~
最后献上代码
require('echarts/util/mapData/params').params.anhui = {
getGeoJson: function (callback) {
$.getJSON('geoJson/anhui.json', function (data) {
// 压缩后的地图数据必须使用 decode 函数转换
callback(require('echarts/util/mapData/params').decode(data));
});
}
}
附加套餐：
1.鼠标移动事件
var ecConfig = require('echarts/config'); myChart.on(ecConfig.EVENT.HOVER, function (param) { var selectedName = param.name; showTextInfo(selectedName);//通过选择的市名显示信息 })
2.自定义formatter (再也不用担心只显示一个了)，这里用的是静态数据~
var data_school = [ { name: '六安市', value: 10 }, { name: '安庆市', value: 10 }, { name: '滁州市', value: 10 }, { name: '宣城市', value: 10 }, { name: '阜阳市', value: 10 }, { name: '宿州市', value: 10 }, { name: '黄山市', value: 10 }, { name: '亳州市', value: 10 }, { name: '池州市', value: 10 }, { name: '合肥市', value: 10 }, { name: '蚌埠市', value: 10 }, { name: '芜湖市', value: 10 }, { name: '淮北市', value: 10 }, { name: '淮南市', value: 10 }, { name: '马鞍山市', value: 10 }, { name: '铜陵市', value: 10 } ] var data_specialty = [ { name: '六安市', value: 20 }, { name: '安庆市', value: 20 }, { name: '滁州市', value: 20 }, { name: '宣城市', value: 20 }, { name: '阜阳市', value: 20 }, { name: '宿州市', value: 20 }, { name: '黄山市', value: 20 }, { name: '亳州市', value: 20 }, { name: '池州市', value: 20 }, { name: '合肥市', value: 20 }, { name: '蚌埠市', value: 20 }, { name: '芜湖市', value: 20 }, { name: '淮北市', value: 20 }, { name: '淮南市', value: 20 }, { name: '马鞍山市', value: 20 }, { name: '铜陵市', value: 20 } ] require('echarts/util/mapData/params').params.anhui = { getGeoJson: function (callback) { $.getJSON('geoJson/anhui.json', function (data) { // 压缩后的地图数据必须使用 decode 函数转换 callback(require('echarts/util/mapData/params').decode(data)); }); } } // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('echartDiv')); option = { title: { text: '', subtext: '', }, tooltip: { trigger: 'item', formatter: function (a) { res = a[1] + '</br>共 ' + a[2] + ' 个建设项目'; for (var i = 0; i < data_school.length; i++) { if (a[1] == data_school[i].name) { res += '</br>学校：' + data_school[i].value; } if (a[1] == data_specialty[i].name) { res += '</br>专业：' + data_specialty[i].value; } } return res; } }, toolbox: { show: true, orient: 'vertical', x: 'right', y: 'bottom', feature: { saveAsImage: { show: true } } }, dataRange: { min: 0, max: 500, text: ['多', '少'], realtime: false, calculable: true, color: ['orangered', 'yellow', 'lightskyblue'] }, series: [ { name: '', type: 'map', mapType: 'anhui', // 自定义扩展图表类型 selectedMode: false, itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, data: [ { name: '六安市', value: Math.round(Math.random() * 500) }, { name: '安庆市', value: Math.round(Math.random() * 500) }, { name: '滁州市', value: Math.round(Math.random() * 500) }, { name: '宣城市', value: Math.round(Math.random() * 500) }, { name: '阜阳市', value: Math.round(Math.random() * 500) }, { name: '宿州市', value: Math.round(Math.random() * 500) }, { name: '黄山市', value: Math.round(Math.random() * 500) }, { name: '亳州市', value: Math.round(Math.random() * 500) }, { name: '池州市', value: Math.round(Math.random() * 500) }, { name: '合肥市', value: Math.round(Math.random() * 500) }, { name: '蚌埠市', value: Math.round(Math.random() * 500) }, { name: '芜湖市', value: Math.round(Math.random() * 500) }, { name: '淮北市', value: Math.round(Math.random() * 500) }, { name: '淮南市', value: Math.round(Math.random() * 500) }, { name: '马鞍山市', value: Math.round(Math.random() * 500) }, { name: '铜陵市', value: Math.round(Math.random() * 500) } ] } ] };
到此~ok~此时应有掌声
