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~此时应有掌声