Echarts实战案例代码(11)：利用geojson数据地图map组件生成js本地版直接访问的解决方案

series-map组件，在构建地理区域数据可视化时，一般是使用getJSON()来获取geojso数据，然后进行渲染。但是使用$.getJSON()就必须在http服务下进行访问，需要搭建http服务器。 代码如下：

 //调用地图geojson
    $.getJSON('geojson/au-all.geo.json', function (data) {
   //some codes;
   }

然后通过：http://test.com/进行预览访问。

能不能在本地直接点击访问呢？答案是肯定的。其步骤如下：

1. 获取对应区域的geojson；
2. 将geojson文件转换位js文件；

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('lockdatav',
    //将geojson数据内容直接复制到该处即可；
    );
}));

将改JS文件保存为lockgeojson.js。

3. html文件中直接调用lockgeojson.js；

1. echarts代码开发

series: [{
                type: 'map',
                map: 'lockdatav',//对应JS文件中地图的名称;
                roam: true,
                zoom: 1,
                aspectScale: 1,
                nameMap: {//自定义地区的名称映射
                    'South Australia': '南澳大利亚州',
                    'New South Wales': '新南威尔士州',
                    'Queensland': '昆士兰州',
                    'Tasmania': '塔斯马尼亚',
                    'Victoria': '维多利亚州',
                    'Western Australia': '西澳大利亚州',
                    'Australian Capital Territory': '澳大利亚首都领地',
                    'Northern Territory': '北领地',
                    'Norfolk Island': '诺福克岛',
                    'Jervis Bay Territory': '杰维斯湾地区',
                },
                label: {
                    normal: {
                        show: false,
                        color: "#fff"
                    },
                    emphasis: {
                        show: true,
                        color: "#fff"
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                },
            }]

5. echarts自适应窗口；

 //渲染图表，并自适应窗口；
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

Done!