react+ts+echarts5.x按需导入实现世界地图
registerMap注册世界地图
1. 获取世界地图geoJSON格式的文件
获取地图的渠道
这个步骤很重要！本人找了很久都没找到世界地图的GeoJSON文件，这个网址可以提供，并且也提供了各个国家的GeoJSON。
a. 根据 “在线实例” 确定自己想要的世界地图类型，点击 “GeoJSON文件” 复制内容；
b. 在项目中新建一个 world.json 文件，将上一步复制的内容粘贴进去后保存；
2. 导入该地图
echarts.registerMap('world', require('./worldMap.json'))
- 第一个形参是为导入的地图进行命名，要与
series中的map属性保持一致。 - 第二个形参是文件的存放路径
3. 使用该地图
需要导入和注册 MapChart、GeoComponent
// 实例化 echarts map
const map = echarts.init(chartmap.current as unknown as HTMLDivElement)
// 定义map参数
const mapOption = {
title: {
text: 'world Population',
subtext: 'from United Nations,Total...',
x: 'center',
y: 'top',
},
tooltip: {
trigger: 'item',
},
toolbox: {
show: true,
orient: 'vertical',
},
dataRange: {
min: 0,
max: 1000000,
text: ['High', 'Low'],
realtime: false,
calcuable: true,
color: ['organered', 'yellow', 'lightskyblue'],
},
series: [
{
name: 'World Population',
type: 'map',
map: 'world',
roam: true,
mapLocation: {
y: 60,
},
itemStyle: {
emphasis: {
label: {
show: true } },
},
data: [],
},
],
}
// 注册map
map.setOption(mapOption)
// 在dom中
<Div ref={
chartmap} />
最终效果图
完整代码
import * as echarts from 'echarts/core'
import {
BarChart,
// 系列类型的定义后缀都为 SeriesOption
LineChart,
MapChart,
} from 'echarts/charts'
import {
TitleComponent,
// 组件类型的定义后缀都为 ComponentOption
TooltipComponent,
GridComponent,
// 数据集组件
DatasetComponent,
// 内置数据转换器组件 (filter, sort)
TransformComponent,
LegendComponent,
DataZoomComponent,
ToolboxComponent,
VisualMapComponent,
GeoComponent,
} from 'echarts/components'
import {
LabelLayout, UniversalTransition } from 'echarts/features'
import {
CanvasRenderer } from 'echarts/renderers'
import {
useEffect, useRef } from 'react'
import styled from 'styled-components'
import {
getMethod } from '../../http'
import Button from '../Button/Button'
import {
postMethod } from '../../service'
const Div = styled.div`
width: 80%;
height: 80vh;
`
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LineChart,
LegendComponent,
DataZoomComponent,
ToolboxComponent,
VisualMapComponent,
MapChart,
GeoComponent,
])
interface IProps {
title: string
xData: string[]
seriesData: number[]
}
const ECharts: React.FC<IProps> = ({
title, xData, seriesData }) => {
// 1. get DOM
const chartmap = useRef(null)
useEffect(() => {
// 实例化 echarts map
const map = echarts.init(chartmap.current as unknown as HTMLDivElement)
echarts.registerMap('world', require('./worldMap.json'))
// 定义map参数
const mapOption = {
title: {
text: 'world Population',
subtext: 'from United Nations,Total...',
x: 'center',
y: 'top',
},
tooltip: {
trigger: 'item',
},
toolbox: {
show: true,
orient: 'vertical',
},
dataRange: {
min: 0,
max: 1000000,
text: ['High', 'Low'],
realtime: false,
calcuable: true,
color: ['organered', 'yellow', 'lightskyblue'],
},
series: [
{
name: 'World Population',
type: 'map',
map: 'world',
roam: true,
mapLocation: {
y: 60,
},
itemStyle: {
emphasis: {
label: {
show: true } },
},
data: [],
},
],
}
// 4. 调用数据
map.setOption(mapOption)
return (
<>
<Div ref={
chartmap} />
</>
)
}
export default ECharts
内部属性的具体使用方法注释后期看完官网的API文档后再更新上去。
2022/08/24 更新
1. 修改国家名称：
从步骤一获得的世界地图.json文件里，每个对象中的id属性对应国家的缩写，properties的name属性对应国家名称，是可以更改的，即可以修改地图上的显示名称。
2. 修改国家版图覆盖范围：
往geometry.coordinates中加入城市坐标即可，如上面的世界地图.json文件是没有把台湾加入到中国版图中的，我们应该把台湾的坐标放入中国对象中的geometry.coordinates里，以下是将台湾加入中国版图的json：
{
"type": "Feature",
// 国家缩写
"id": "CN",
"properties": {
"hc-group": "admin0",
"hc-middle-x": 0.42,
"hc-middle-y": 0.55,
"hc-key": "cn",
"hc-a2": "CN",
"name": "China", // 可更改国家在地图上的显示名称
"labelrank": "2",
"country-abbrev": "China",
"subregion": "Eastern Asia",
"region-wb": "East Asia & Pacific",
"iso-a3": "CHN",
"iso-a2": "CN",
"woe-id": "23424781",
"continent": "Asia"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [ // 国家版图的覆盖范围
[
[
[7784, 7205],
[7802, 7240],
[7813, 7254],
[7828, 7261],
[7837, 7256],
[7835, 7247],
[7836, 7236],
[7830, 7227],
[7823, 7194],
[7812, 7179],
[7807, 7170],
[7806, 7157],
[7797, 7172],
[7791, 7175],
[7783, 7192],
[7784, 7205]
]
],
[
[
[7838, 7457],
[7820, 7463],
[7819, 7470],
[7838, 7461],
[7838, 7457]
]
],
[
[
[7448, 7072],
[7446, 7074],
[7458, 7086],
[7467, 7089],
[7475, 7098],
[7482, 7096],
[7498, 7100],
[7505, 7097],
[7507, 7103],
[7515, 7098],
[7516, 7089],
[7508, 7080],
[7499, 7058],
[7491, 7054],
[7489, 7049],
[7480, 7049],
[7478, 7044],
[7457, 7048],
[7448, 7053],
[7446, 7071],
[7448, 7072]
]
],
[
[
[6866, 7325],
[6861, 7331],
[6863, 7346],
[6857, 7350],
[6843, 7342],
[6834, 7343],
[6831, 7340],
[6814, 7341],
[6802, 7349],
[6797, 7350],
[6793, 7343],
[6786, 7346]