registerMap register world map
1. Obtain the world map geoJSON format file
This step is very important! I have been searching for a long time but have not found the GeoJSON file of the world map. This website can provide it, and it also provides the GeoJSON of each country.
a. “在线实例”Determine , click to “GeoJSON文件”copy the content;
b. Create a new world.jsonfile , paste the content copied in the previous step into it and save it;
2. Import the map
echarts.registerMap('world', require('./worldMap.json'))
- The first formal parameter is to name the imported map, which must be
series中的map属性consistent with . - The second formal parameter is the storage path of the file
3. Use the map
Need to import and registerMapChart、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} />
final rendering
full code
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
The specific usage method of the internal attributes will be updated after reading the API documentation on the official website later.
2022/08/24 update
1. Modify the country name:
From step 1 世界地图.json文件, the id attribute in each object corresponds to the abbreviation of the country, and the name attribute of properties corresponds to the country name, which can be changed, that is, the display name on the map can be modified.
2. Modify the country map coverage:
Just add the city coordinates to geometry.coordinates. If 世界地图.json文件Taiwan is not added to the Chinese territory above, we should put the coordinates of Taiwan into the geometry.coordinates of the Chinese object. The following is how to add Taiwan to the Chinese territory 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],
[6780, 7343],
[6771, 7357],
[6769, 7354],
[6754, 7356],
[6756, 7365],
[6741, 7366],
[6728, 7375],
[6724, 7386],
[6707, 7384],
[6697, 7398],
[6687, 7399],
[6679, 7408],
[6667, 7412],
[6665, 7421],
[6651, 7423],
[6645, 7422],
[6639, 7410],
[6633, 7416],
[6621, 7425],
[6609, 7428],
[6611, 7433],
[6599, 7441],
[6591, 7440],
[6583, 7447],
[6580, 7453],
[6567, 7453],
[6569, 7462],
[6565, 7467],
[6567, 7474],
[6558, 7482],
[6556, 7492],
[6567, 7495],
[6572, 7486],
[6583, 7491],
[6589, 7499],
[6584, 7506],
[6585, 7513],
[6573, 7517],
[6568, 7525],
[6566, 7543],
[6574, 7547],
[6572, 7552],
[6553, 7562],
[6545, 7582],
[6546, 7588],
[6539, 7590],
[6527, 7589],
[6509, 7595],
[6502, 7603],
[6491, 7600],
[6483, 7610],
[6486, 7614],
[6485, 7622],
[6480, 7630],
[6469, 7632],
[6460, 7640],
[6453, 7637],
[6443, 7641],
[6438, 7645],
[6448, 7650],
[6453, 7648],
[6461, 7654],
[6453, 7661],
[6455, 7666],
[6450, 7677],
[6449, 7692],
[6437, 7697],
[6431, 7697],
[6428, 7692],
[6422, 7694],
[6418, 7704],
[6422, 7708],
[6415, 7716],
[6416, 7724],
[6425, 7728],
[6422, 7737],
[6426, 7744],
[6437, 7746],
[6448, 7754],
[6452, 7761],
[6462, 7758],
[6473, 7765],
[6477, 7753],
[6493, 7758],
[6496, 7755],
[6504, 7764],
[6509, 7776],
[6516, 7779],
[6530, 7777],
[6547, 7779],
[6555, 7791],
[6583, 7805],
[6596, 7808],
[6599, 7813],
[6609, 7813],
[6610, 7819],
[6612, 7821],
[6608, 7835],
[6611, 7842],
[6620, 7844],
[6615, 7849],
[6627, 7853],
[6623, 7860],
[6625, 7864],
[6616, 7886],
[6614, 7907],
[6618, 7910],
[6603, 7913],
[6600, 7916],
[6607, 7921],
[6629, 7925],
[6653, 7933],
[6661, 7925],
[6670, 7928],
[6677, 7924],
[6681, 7936],
[6671, 7939],
[6677, 7953],
[6687, 7983],
[6692, 7991],
[6693, 8001],
[6696, 8001],
[6719, 7992],
[6741, 7993],
[6743, 7987],
[6758, 7995],
[6766, 7995],
[6771, 8008],
[6766, 8028],
[6774, 8046],
[6786, 8046],
[6797, 8051],
[6803, 8058],
[6802, 8065],
[6806, 8072],
[6819, 8072],
[6825, 8073],
[6834, 8075],
[6836, 8067],
[6832, 8063],
[6841, 8056],
[6838, 8053],
[6856, 8044],
[6857, 8038],
[6870, 8030],
[6886, 8031],
[6891, 8024],
[6899, 8026],
[6901, 8022],
[6908, 8018],
[6912, 8005],
[6919, 7994],
[6924, 7991],
[6929, 7977],
[6925, 7968],
[6928, 7957],
[6919, 7947],
[6917, 7938],
[6924, 7927],
[6941, 7925],
[6943, 7923],
[6958, 7923],
[6963, 7920],
[6979, 7921],
[7002, 7918],
[7014, 7908],
[7021, 7908],
[7026, 7902],
[7046, 7893],
[7057, 7894],
[7055, 7884],
[7060, 7883],
[7071, 7857],
[7084, 7845],
[7085, 7838],
[7110, 7841],
[7177, 7833],
[7193, 7837],
[7228, 7831],
[7241, 7831],
[7252, 7819],
[7283, 7813],
[7302, 7804],
[7325, 7808],
[7325, 7801],
[7340, 7798],
[7346, 7804],
[7392, 7823],
[7433, 7829],
[7452, 7827],
[7472, 7829],
[7477, 7832],
[7499, 7840],
[7516, 7859],
[7533, 7866],
[7544, 7873],
[7541, 7882],
[7535, 7886],
[7529, 7900],
[7538, 7919],
[7546, 7923],
[7558, 7922],
[7563, 7917],
[7578, 7913],
[7593, 7911],
[7605, 7917],
[7617, 7927],
[7621, 7934],
[7632, 7934],
[7654, 7937],
[7669, 7946],
[7670, 7953],
[7681, 7968],
[7688, 7971],
[7702, 7969],
[7705, 7978],
[7713, 7975],
[7730, 7983],
[7744, 7981],
[7747, 7984],
[7761, 7979],
[7772, 7978],
[7779, 7983],
[7778, 7990],
[7771, 8001],
[7756, 8013],
[7754, 8018],
[7745, 8022],
[7739, 8029],
[7728, 8032],
[7715, 8030],
[7713, 8029],
[7708, 8022],
[7702, 8018],
[7689, 8026],
[7671, 8026],
[7659, 8020],
[7651, 8028],
[7649, 8036],
[7658, 8041],
[7658, 8050],
[7684, 8100],
[7695, 8094],
[7715, 8088],
[7737, 8100],
[7742, 8105],
[7758, 8107],
[7763, 8120],
[7756, 8121],
[7767, 8135],
[7767, 8142],
[7774, 8148],
[7784, 8171],
[7798, 8181],
[7804, 8189],
[7800, 8198],
[7803, 8206],
[7795, 8210],
[7787, 8207],
[7782, 8214],
[7790, 8219],
[7806, 8235],
[7817, 8235],
[7850, 8244],
[7866, 8243],
[7878, 8247],
[7898, 8242],
[7903, 8238],
[7920, 8230],
[7932, 8232],
[7950, 8223],
[7958, 8210],
[7964, 8205],
[7974, 8190],
[7971, 8184],
[7977, 8174],
[7978, 8168],
[7986, 8158],
[7986, 8148],
[7996, 8136],
[7998, 8118],
[8005, 8115],
[8002, 8108],
[8003, 8099],
[8013, 8091],
[8019, 8089],
[8041, 8090],
[8040, 8086],
[8050, 8082],
[8058, 8085],
[8067, 8079],
[8073, 8070],
[8083, 8063],
[8096, 8064],
[8091, 8054],
[8098, 8049],
[8100, 8042],
[8096, 8033],
[8107, 8019],
[8118, 8021],
[8123, 8018],
[8145, 8021],
[8149, 8020],
[8156, 8029],
[8167, 8035],
[8178, 8034],
[8186, 8040],
[8205, 8045],
[8215, 8041],
[8210, 8031],
[8216, 8020],
[8208, 8009],
[8198, 8003],
[8193, 7980],
[8189, 7974],
[8191, 7966],
[8184, 7962],
[8184, 7954],
[8179, 7952],
[8178, 7943],
[8168, 7935],
[8168, 7924],
[8159, 7922],
[8152, 7931],
[8141, 7932],
[8135, 7928],
[8129, 7932],
[8118, 7919],
[8103, 7914],
[8107, 7908],
[8113, 7886],
[8110, 7867],
[8113, 7864],
[8111, 7852],
[8105, 7843],
[8099, 7843],
[8088, 7839],
[8092, 7831],
[8083, 7839],
[8079, 7847],
[8072, 7847],
[8067, 7828],
[8056, 7828],
[8053, 7820],
[8044, 7814],
[8018, 7812],
[8018, 7808],
[8026, 7798],
[8021, 7791],
[7995, 7795],
[7986, 7806],
[7976, 7801],
[7973, 7793],
[7958, 7774],
[7951, 7774],
[7941, 7765],
[7926, 7760],
[7910, 7746],
[7903, 7737],
[7881, 7735],
[7870, 7732],
[7854, 7723],
[7856, 7718],
[7847, 7718],
[7836, 7706],
[7815, 7699],
[7814, 7706],
[7831, 7711],
[7828, 7715],
[7834, 7721],
[7820, 7722],
[7820, 7729],
[7827, 7731],
[7827, 7738],
[7837, 7742],
[7849, 7760],
[7836, 7772],
[7816, 7775],
[7798, 7757],
[7794, 7750],
[7768, 7739],
[7762, 7733],
[7761, 7723],
[7752, 7715],
[7738, 7713],
[7730, 7710],
[7724, 7716],
[7715, 7712],
[7709, 7695],
[7714, 7687],
[7725, 7679],
[7739, 7676],
[7747, 7679],
[7760, 7663],
[7753, 7665],
[7751, 7650],
[7765, 7644],
[7775, 7645],
[7777, 7652],
[7790, 7663],
[7803, 7668],
[7822, 7661],
[7828, 7655],
[7844, 7659],
[7846, 7654],
[7861, 7654],
[7859, 7647],
[7850, 7634],
[7842, 7640],
[7804, 7622],
[7802, 7611],
[7792, 7608],
[7792, 7613],
[7785, 7614],
[7787, 7605],
[7779, 7594],
[7771, 7593],
[7758, 7575],
[7758, 7564],
[7762, 7566],
[7771, 7558],
[7789, 7550],
[7796, 7529],
[7808, 7508],
[7807, 7497],
[7822, 7487],
[7824, 7478],
[7835, 7473],
[7835, 7465],
[7819, 7471],
[7810, 7469],
[7805, 7475],
[7804, 7468],
[7815, 7464],
[7832, 7451],
[7840, 7440],
[7823, 7435],
[7810, 7428],
[7803, 7418],
[7808, 7416],
[7815, 7421],
[7822, 7421],
[7831, 7410],
[7842, 7405],
[7851, 7407],
[7841, 7410],
[7843, 7419],
[7848, 7425],
[7853, 7423],
[7849, 7418],
[7852, 7405],
[7846, 7400],
[7840, 7404],
[7828, 7393],
[7838, 7399],
[7838, 7380],
[7828, 7387],
[7823, 7381],
[7829, 7382],
[7831, 7373],
[7826, 7367],
[7830, 7357],
[7823, 7355],
[7814, 7346],
[7810, 7346],
[7799, 7333],
[7797, 7321],
[7788, 7316],
[7792, 7314],
[7782, 7310],
[7777, 7304],
[7776, 7310],
[7768, 7307],
[7770, 7301],
[7775, 7301],
[7778, 7293],
[7772, 7292],
[7766, 7283],
[7773, 7283],
[7769, 7273],
[7778, 7269],
[7774, 7265],
[7763, 7268],
[7755, 7265],
[7766, 7260],
[7748, 7255],
[7752, 7251],
[7744, 7247],
[7742, 7239],
[7735, 7241],
[7724, 7233],
[7726, 7229],
[7719, 7222],
[7714, 7222],
[7705, 7211],
[7696, 7207],
[7692, 7209],
[7686, 7201],
[7679, 7203],
[7682, 7197],
[7678, 7188],
[7672, 7189],
[7659, 7182],
[7654, 7187],
[7650, 7182],
[7636, 7184],
[7631, 7176],
[7628, 7184],
[7621, 7182],
[7620, 7173],
[7613, 7177],
[7616, 7170],
[7611, 7166],
[7602, 7172],
[7594, 7191],
[7588, 7188],
[7593, 7183],
[7592, 7164],
[7587, 7165],
[7576, 7158],
[7565, 7148],
[7559, 7154],
[7542, 7150],
[7535, 7145],
[7519, 7143],
[7508, 7139],
[7502, 7131],
[7505, 7127],
[7495, 7128],
[7496, 7118],
[7503, 7113],
[7499, 7107],
[7485, 7106],
[7480, 7123],
[7477, 7126],
[7479, 7143],
[7472, 7150],
[7473, 7144],
[7462, 7141],
[7462, 7147],
[7454, 7152],
[7450, 7148],
[7441, 7155],
[7443, 7147],
[7438, 7150],
[7428, 7143],
[7423, 7148],
[7409, 7147],
[7391, 7159],
[7385, 7170],
[7386, 7178],
[7391, 7182],
[7384, 7188],
[7379, 7185],
[7369, 7189],
[7365, 7187],
[7349, 7201],
[7334, 7193],
[7335, 7188],
[7320, 7180],
[7313, 7184],
[7309, 7175],
[7300, 7184],
[7296, 7177],
[7290, 7184],
[7281, 7172],
[7265, 7183],
[7255, 7171],
[7241, 7173],
[7237, 7167],
[7244, 7154],
[7243, 7133],
[7237, 7136],
[7230, 7134],
[7227, 7145],
[7226, 7152],
[7213, 7144],
[7198, 7142],
[7197, 7149],
[7191, 7151],
[7191, 7161],
[7167, 7164],
[7174, 7174],
[7172, 7182],
[7178, 7192],
[7170, 7192],
[7159, 7196],
[7160, 7203],
[7153, 7220],
[7159, 7225],
[7151, 7223],
[7139, 7225],
[7123, 7216],
[7119, 7219],
[7125, 7225],
[7123, 7234],
[7119, 7235],
[7120, 7244],
[7127, 7247],
[7125, 7254],
[7137, 7264],
[7138, 7271],
[7144, 7270],
[7148, 7278],
[7154, 7280],
[7150, 7287],
[7156, 7303],
[7154, 7320],
[7154, 7333],
[7146, 7336],
[7142, 7332],
[7137, 7345],
[7137, 7350],
[7124, 7363],
[7120, 7363],
[7114, 7353],
[7103, 7357],
[7092, 7369],
[7085, 7381],
[7080, 7382],
[7079, 7390],
[7067, 7389],
[7054, 7380],
[7039, 7383],
[7034, 7388],
[7024, 7381],
[7026, 7379],
[7005, 7368],
[7000, 7368],
[6989, 7358],
[6977, 7351],
[6976, 7344],
[6956, 7338],
[6946, 7339],
[6947, 7344],
[6936, 7349],
[6930, 7345],
[6918, 7349],
[6915, 7354],
[6905, 7358],
[6894, 7356],
[6886, 7351],
[6866, 7325]
]
]
]
}
},