Echarts实战案例代码(10):echarts结合世界所有国家地图数据集geojson的(英文翻译映射)解决方案

简介: Echarts实战案例代码(10):echarts结合世界所有国家地图数据集geojson的(英文翻译映射)解决方案

国外地图,默认GeoJSON文件为英文,为了阅读友好化体验,一般需要将地区的名称翻译成中文。

一种方式是修改GeoJSON文件内部,找到对应地区的name属性,直接替换成相应的中文即可,这种方式在众多的数字中找名字,比较费时费力。


20200715214848265.png


一种是使用echarts图表库geo组件中的nameMap属性,自定义地区的名称映射,即可自动翻译(映射)。

  nameMap: {//自定义地区的名称映射
                    'South Australia': '南澳大利亚州',
                    'New South Wales': '新南威尔士州',
                    'Queensland': '昆士兰州',
                    'Tasmania': '塔斯马尼亚',
                    'Victoria': '维多利亚州',
                    'Western Australia': '西澳大利亚州',
                    'Australian Capital Territory': '澳大利亚首都领地',
                    'Northern Territory': '北领地',
                    'Norfolk Island': '诺福克岛',
                    'Jervis Bay Territory': '杰维斯湾地区',
                }


20200715215213231.png


完整演示代码:

 $.getJSON('geojson/au-all.geo.json', function (data) {
        //注册地图;
        echarts.registerMap('Australia', data);
        var myChart = echarts.init(document.getElementById('map'));
        var option = {
            backgroundColor: '#404a59',
            title: {
                text: '漏刻有时地图数据可视化-Highmaps',
                top: "5%",
                x: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ' : ' + params.value[2];
                }
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                data: ['pm2.5'],
                textStyle: {
                    color: '#fff'
                }
            },
            /*视觉映射*/
            visualMap: {
                min: 0,
                max: 200,
                calculable: true,
                inRange: {
                    color: ['#50a3ba', '#eac736', '#d94e5d']
                },
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'Australia',//必须与初始注册的地图名称一致;
                roam: true,
                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: true,
                        color: "#fff"
                    },
                    emphasis: {
                        show: true,
                        color: "#fff"
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: []//根据需要执行气泡图、飞线图;
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });


Done!

如何获得世界所有国家地图数据集geojson文件,请CSDN私信给LZ.

相关文章
|
3月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
347 1
|
4月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
202 23
echarts地图数据信息流向图效果
|
5月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
190 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
3月前
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
62 1
|
3月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
761 0
|
5月前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
67 0
|
5月前
|
定位技术 Apache
Echarts——Invalid geoJson format Cannot read property 'length' of undefined
Echarts——Invalid geoJson format Cannot read property 'length' of undefined
114 0
|
7月前
|
JSON 数据可视化 JavaScript
Echarts地图实现:山东省会员活跃度
使用ECharts展示山东会员活跃度,通过散点图和地图结合,颜色对比强烈,背景深蓝(#020933)、点色明亮黄(#F4E925)。核心代码示例展示了散点、地图及特效散点系列配置。[点击下载](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89493130)代码和数据。
99 0
Echarts地图实现:山东省会员活跃度
|
7月前
|
JSON JavaScript 前端开发
Echarts地图实现:杭州市困难人数分布
使用ECharts实现杭州困难人数分布地图,结合地区与散点图,动态展示数据变化。支持进入下级区域并返回。预览包含动画效果。关键代码涉及地图初始化、数据加载及事件处理。需`hangzhou-map.json`数据文件。完整代码和资源见链接。
122 0
|
7月前
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!