Echarts + 中国地图+事件报警撒点

1、需要引入Echarts和China.js

整个地图是给予Echarts构建,所以必须引入,至于china.js,则是中国地图的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('china', {"type":"FeatureCollection",....})

关于相关china.js共享:
https://github.com/apache/incubator-echarts/blob/master/map/js/china.js
https://www.houduniot.com/static/script/china.js

2、具体组件代码





3、具体效果

Echarts + 中国地图+事件报警撒点_第1张图片
Echarts + 中国地图+事件报警撒点_第2张图片

你可能感兴趣的:(map,Echarts)