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.

相关文章
|
11月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
1282 1
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
653 23
echarts地图数据信息流向图效果
|
11月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
3088 0
|
11月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
971 1
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
1690 1
微信小程序使用echarts图表(ec-canvas)
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
12月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
11月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
2680 0
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
484 1
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作

热门文章

最新文章