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~此時應有掌聲