ECharts 全国各县市地图

以你之姓@ 2022-11-26 01:50 430阅读 0赞

### ECharts 全国各县市地图 ###

*  获取底图数据
 *   *  1、http://datav.aliyun.com/tools/atlas
     *  2、http://geojson.io
     *  加载地图数据
     *   *  JavaScript 引入示例
         *  JSON 引入示例【导入数据】
 *  ECharts 创建地图
 *   *  初始化（注册地图）
 *  绘制地图
 *  参考资料

# 获取底图数据 #

## 1、http://datav.aliyun.com/tools/atlas ##

从 [http://datav.aliyun.com/tools/atlas][http_datav.aliyun.com_tools_atlas] 选择目标省市后。下载 `json` 数据。（或直接从它给的`json`地址加载）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]

## 2、http://geojson.io ##

如果需要一些自定义的区域也可以自己来画 [http://geojson.io/][http_geojson.io] （画完右边就生成`geojson`了）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 1]

## 加载地图数据 ##

### JavaScript 引入示例 ###

这就是为什么全国地图时可以直接用。其实 [map/js/china.js][map_js_china.js] 注册了地图。

### JSON 引入示例【导入数据】 ###

$.get('map/json/china.json', function (chinaJson) { 
        echarts.registerMap('china', chinaJson);
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({ 
            series: [{ 
                type: 'map',
                map: 'china'
            }]
        });
    });

如果想将数据放到 `ECharts` 上，按入下操作后直接加载那个`json`地址就行了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 2]

# ECharts 创建地图 #

## 初始化（注册地图） ##

myChart.showLoading();// 显示 loading
    $.get(uploadedDataURL, function(geoJsonData) { 
    	myChart.hideLoading();// 隐藏 loading 
        echarts.registerMap('注册地图的key', geoJson, { });
    }

# 绘制地图 #

全国地图默认可以直接用。省了上面的注册。其它地方的还得自己注册地图。  
可以把代码粘到 [https://gallery.echartsjs.com/editor.html][https_gallery.echartsjs.com_editor.html] 去看效果(登录后才能使用 【导入数据】哦)

// visualMap-piecewise.pieces 视觉映射组件：数值、颜色
    var visualMap_pieces = [{ gte:10000,color:'#9c0a0d'},{ min:1000,max:9999,color:'#c91015'},{ min:500,max:999,color:'#e64b47'},{ min:100,max:499,color:'#fe8664'},{ min:10,max:99,color:'#ffd2a0'},{ min:1,max:9,color:'#ffefd6'}].map(v=> Object.assign({ },v,{ 'symbol':'circle'}));
    // series-map.data 疫情数据
    var series_data = [{ "name":"香港","value":1177},{ "name":"新疆","value":554},{ "name":"辽宁","value":78},{ "name":"上海","value":48},{ "name":"台湾","value":29},{ "name":"广东","value":17},{ "name":"山东","value":15},{ "name":"四川","value":13},{ "name":"陕西","value":9},{ "name":"北京","value":6},{ "name":"江苏","value":5},{ "name":"浙江","value":4},{ "name":"内蒙古","value":4},{ "name":"湖北","value":4},{ "name":"福建","value":3},{ "name":"天津","value":2},{ "name":"吉林","value":1},{ "name":"云南","value":1},{ "name":"青海","value":0},{ "name":"西藏","value":0},{ "name":"澳门","value":0},{ "name":"黑龙江","value":0},{ "name":"河北","value":0},{ "name":"海南","value":0},{ "name":"广西","value":0},{ "name":"重庆","value":0},{ "name":"河南","value":0},{ "name":"江西","value":0},{ "name":"贵州","value":0},{ "name":"山西","value":0},{ "name":"湖南","value":0},{ "name":"安徽","value":0},{ "name":"宁夏","value":0},{ "name":"甘肃","value":0}];
    // series-map.nameMap 名称映射 geojson => series.data （这次因为一样，所以就省了一步了）
    //var series_nameMap = {"新疆维吾尔自治区":"新疆","上海市":"上海","内蒙古自治区":"内蒙古","天津市":"天津","宁夏回族自治区":"宁夏","重庆市":"重庆","西藏自治区":"西藏","广西壮族自治区":"广西"};
    
    var title = '全国疫情地图'
    var seriesName = '全国疫情地图';
    var region_image = "/asset/get/s/data-1597065699284-XzUk4zC4n"; // 我已将图片导入echarts，参考上面导的【JSON 引入示例】。
    
    var option = { 
    	// 鼠标悬停tips
        tooltip: {  trigger: 'item' },
        title: {  text: title},
        // 图例组件，会显示首府红点
        legend: { 
            show : false // 隐藏图例按钮
        },
        // 视觉映射组件 (就是左下角的那个数字 + 圆点)
        visualMap: { 
            type: 'piecewise', // 连续型:continuous, 分段型:piecewise
            pieces: visualMap_pieces
        },
        // 添加logo
        graphic: { 
            type: 'image',
            id: 'logo',
            right: 20,
            top: 30,
            style: { 
                image: region_image,
                width: 100,
                height: 60,
            }
        },
        series: { 
            name: seriesName,
            type: 'map',
            map: 'china',
            roam: true,
            label: { 
                show: true,
                color: 'rgb(0, 0, 0)'
            },
            data: series_data,
            // 自定义名称映射 geojson => series.data （这次因为一样，所以就省了一步了）
            //nameMap: series_nameMap
        }
    };
    myChart.setOption(option);

疫情数据 `series_data` 可以从腾讯取。跨域的问题自己在服务端转一手吧。

$.get('https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5', function(jsonData){ 
        var json = JSON.parse(jsonData.data);
        series_data = obj.areaTree[0].children.map(v=> Object.assign({ },{ 'name': v.name,  'value' : v.total.confirm - v.total.heal - v.total.dead}));
    });

# 参考资料 #

`series-map.nameMap` 是指当 `series` 下`type = map` 时 `nameMap` 的含义。很多属性都用到了类似的表达。

1.  [初始化图表，创建一个 ECharts 实例： **echarts.init( 实例容器, \[主题\], \[附加参数\])**][ECharts _ _echarts.init_ _ _]
2.  [geo.map 地图类型（是指注册地图时你设置的名字） && 如何加载地图数据][geo.map _ _]
3.  [echarts.registerMap 注册可用的地图 ][echarts.registerMap _]
4.  [visualMap-piecewise.pieces 自定义『分段式视觉映射组件』每一段的：范围、文字、样式][visualMap-piecewise.pieces]
5.  [series-map.nameMap （省市县的）名称映射，如果 geojson 中的名字与 series.data 不一至则需要映射][series-map.nameMap _ geojson _ series.data]
6.  [graphic 在图表中显示图片，支持多张][graphic]
7.  [echarts 转 图片][echarts _]

[http_datav.aliyun.com_tools_atlas]: http://datav.aliyun.com/tools/atlas
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]: /images/20221124/e4b66b249e1c4a2a8d5fc5b8287fa8af.png
[http_geojson.io]: http://geojson.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 1]: /images/20221124/e4e3e293b28f41918a0c003f98362454.png
[map_js_china.js]: https://gallerybox.echartsjs.com/dep/echarts/map/js/china.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 2]: /images/20221124/408dd8c55010481c8c9a131be017046a.png
[https_gallery.echartsjs.com_editor.html]: https://gallery.echartsjs.com/editor.html
[ECharts _ _echarts.init_ _ _]: https://echarts.apache.org/zh/api.html#echarts.init
[geo.map _ _]: https://echarts.apache.org/zh/option.html#geo.map
[echarts.registerMap _]: https://echarts.apache.org/zh/api.html#echarts.registerMap
[visualMap-piecewise.pieces]: https://echarts.apache.org/zh/option.html#visualMap-piecewise.pieces
[series-map.nameMap _ geojson _ series.data]: https://echarts.apache.org/zh/option.html#series-map.nameMap
[graphic]: https://echarts.apache.org/zh/option.html#graphic.elements-image
[echarts _]: https://jerryjin.blog.csdn.net/article/details/108171259