今天写项目需要一个安徽地图,但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~此时应有掌声