react+echarts显示不出世界地图？
如题
js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import jsonData from './list-total.json'
// import echarts from 'echarts'
// import china from 'echarts/map/json/china.json'
class BingLi extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div>
<h1>dh</h1>
<div id='map'>
</div>
</div>
)
}
componentDidMount(){
var myChart = window.echarts.init(document.getElementById('map'));
let option = {
title: {
sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
left: 'center',
top: 'top'
},
/* tooltip: {
trigger: 'item',
formatter: function (params) {
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
+ '.' + value[1];
return params.seriesName + '<br/>' + params.name + ' : ' + value;
}
},*/
visualMap: {
min: 0,
max: 1000000,
text:['High','Low'],
realtime: false,
calculable: true,
color: ['orangered','yellow','lightskyblue']
},
series: [
{
name: 'World Population (2010)',
type: 'map',
mapType: 'world',
roam: true,
itemStyle:{
emphasis:{label:{show:true}}
},
data:[
{name: 'Afghanistan', value: 28397.812},
{name: 'Angola', value: 19549.124},
{name: 'Albania', value: 3150.143},
{name: 'United Arab Emirates', value: 8441.537},
{name: 'Argentina', value: 40374.224},
{name: 'Armenia', value: 2963.496},
{name: 'French Southern and Antarctic Lands', value: 268.065},
{name: 'Australia', value: 22404.488},
{name: 'Austria', value: 8401.924},
{name: 'Azerbaijan', value: 9094.718},
{name: 'Burundi', value: 9232.753},
{name: 'Belgium', value: 10941.288},
{name: 'Benin', value: 9509.798},
{name: 'Burkina Faso', value: 15540.284},
{name: 'Bangladesh', value: 151125.475},
{name: 'Bulgaria', value: 7389.175},
{name: 'The Bahamas', value: 66402.316},
{name: 'Bosnia and Herzegovina', value: 3845.929},
{name: 'Belarus', value: 9491.07},
{name: 'Belize', value: 308.595},
{name: 'Bermuda', value: 64.951},
{name: 'Bolivia', value: 716.939},
{name: 'Brazil', value: 195210.154},
{name: 'Brunei', value: 27.223},
{name: 'Bhutan', value: 716.939},
{name: 'Botswana', value: 1969.341},
{name: 'Central African Republic', value: 4349.921},
{name: 'Canada', value: 34126.24},
{name: 'Switzerland', value: 7830.534},
{name: 'Chile', value: 17150.76},
{name: 'China', value: 1359821.465},
{name: 'Ivory Coast', value: 60508.978},
{name: 'Cameroon', value: 20624.343},
{name: 'Democratic Republic of the Congo', value: 62191.161},
{name: 'Republic of the Congo', value: 3573.024},
{name: 'Colombia', value: 46444.798},
{name: 'Costa Rica', value: 4669.685},
{name: 'Cuba', value: 11281.768},
{name: 'Northern Cyprus', value: 1.468},
{name: 'Cyprus', value: 1103.685},
{name: 'Czech Republic', value: 10553.701},
{name: 'Germany', value: 83017.404},
{name: 'Djibouti', value: 834.036},
{name: 'Denmark', value: 5550.959},
{name: 'Dominican Republic', value: 10016.797},
{name: 'Algeria', value: 37062.82},
{name: 'Ecuador', value: 15001.072},
{name: 'Egypt', value: 78075.705},
{name: 'Eritrea', value: 5741.159},
{name: 'Spain', value: 46182.038},
{name: 'Estonia', value: 1298.533},
{name: 'Ethiopia', value: 87095.281},
{name: 'Finland', value: 5367.693},
{name: 'Fiji', value: 860.559},
{name: 'Falkland Islands', value: 49.581},
{name: 'France', value: 63230.866},
{name: 'Gabon', value: 1556.222},
{name: 'United Kingdom', value: 62066.35},
{name: 'Georgia', value: 4388.674},
{name: 'Ghana', value: 24262.901},
{name: 'Guinea', value: 10876.033},
{name: 'Gambia', value: 1680.64},
{name: 'Guinea Bissau', value: 10876.033},
{name: 'Equatorial Guinea', value: 696.167},
{name: 'Greece', value: 11109.999},
{name: 'Greenland', value: 56.546},
{name: 'Guatemala', value: 14341.576},
{name: 'French Guiana', value: 231.169},
{name: 'Guyana', value: 786.126},
{name: 'Honduras', value: 7621.204},
{name: 'Croatia', value: 4338.027},
{name: 'Haiti', value: 9896.4},
{name: 'Hungary', value: 10014.633},
{name: 'Indonesia', value: 240676.485},
{name: 'India', value: 1205624.648},
{name: 'Ireland', value: 4467.561},
{name: 'Iran', value: 240676.485},
{name: 'Iraq', value: 30962.38},
{name: 'Iceland', value: 318.042},
{name: 'Israel', value: 7420.368},
{name: 'Italy', value: 60508.978},
{name: 'Jamaica', value: 2741.485},
{name: 'Jordan', value: 6454.554},
{name: 'Japan', value: 127352.833},
{name: 'Kazakhstan', value: 15921.127},
{name: 'Kenya', value: 40909.194},
{name: 'Kyrgyzstan', value: 5334.223},
{name: 'Cambodia', value: 14364.931},
{name: 'South Korea', value: 51452.352},
{name: 'Kosovo', value: 97.743},
{name: 'Kuwait', value: 2991.58},
{name: 'Laos', value: 6395.713},
{name: 'Lebanon', value: 4341.092},
{name: 'Liberia', value: 3957.99},
{name: 'Libya', value: 6040.612},
{name: 'Sri Lanka', value: 20758.779},
{name: 'Lesotho', value: 2008.921},
{name: 'Lithuania', value: 3068.457},
{name: 'Luxembourg', value: 507.885},
{name: 'Latvia', value: 2090.519},
{name: 'Morocco', value: 31642.36},
{name: 'Moldova', value: 103.619},
{name: 'Madagascar', value: 21079.532},
{name: 'Mexico', value: 117886.404},
{name: 'Macedonia', value: 507.885},
{name: 'Mali', value: 13985.961},
{name: 'Myanmar', value: 51931.231},
{name: 'Montenegro', value: 620.078},
{name: 'Mongolia', value: 2712.738},
{name: 'Mozambique', value: 23967.265},
{name: 'Mauritania', value: 3609.42},
{name: 'Malawi', value: 15013.694},
{name: 'Malaysia', value: 28275.835},
{name: 'Namibia', value: 2178.967},
{name: 'New Caledonia', value: 246.379},
{name: 'Niger', value: 15893.746},
{name: 'Nigeria', value: 159707.78},
{name: 'Nicaragua', value: 5822.209},
{name: 'Netherlands', value: 16615.243},
{name: 'Norway', value: 4891.251},
{name: 'Nepal', value: 26846.016},
{name: 'New Zealand', value: 4368.136},
{name: 'Oman', value: 2802.768},
{name: 'Pakistan', value: 173149.306},
{name: 'Panama', value: 3678.128},
{name: 'Peru', value: 29262.83},
{name: 'Philippines', value: 93444.322},
{name: 'Papua New Guinea', value: 6858.945},
{name: 'Poland', value: 38198.754},
{name: 'Puerto Rico', value: 3709.671},
{name: 'North Korea', value: 1.468},
{name: 'Portugal', value: 10589.792},
{name: 'Paraguay', value: 6459.721},
{name: 'Qatar', value: 1749.713},
{name: 'Romania', value: 21861.476},
{name: 'Russia', value: 21861.476},
{name: 'Rwanda', value: 10836.732},
{name: 'Western Sahara', value: 514.648},
{name: 'Saudi Arabia', value: 27258.387},
{name: 'Sudan', value: 35652.002},
{name: 'South Sudan', value: 9940.929},
{name: 'Senegal', value: 12950.564},
{name: 'Solomon Islands', value: 526.447},
{name: 'Sierra Leone', value: 5751.976},
{name: 'El Salvador', value: 6218.195},
{name: 'Somaliland', value: 9636.173},
{name: 'Somalia', value: 9636.173},
{name: 'Republic of Serbia', value: 3573.024},
{name: 'Suriname', value: 524.96},
{name: 'Slovakia', value: 5433.437},
{name: 'Slovenia', value: 2054.232},
{name: 'Sweden', value: 9382.297},
{name: 'Swaziland', value: 1193.148},
{name: 'Syria', value: 7830.534},
{name: 'Chad', value: 11720.781},
{name: 'Togo', value: 6306.014},
{name: 'Thailand', value: 66402.316},
{name: 'Tajikistan', value: 7627.326},
{name: 'Turkmenistan', value: 5041.995},
{name: 'East Timor', value: 10016.797},
{name: 'Trinidad and Tobago', value: 1328.095},
{name: 'Tunisia', value: 10631.83},
{name: 'Turkey', value: 72137.546},
{name: 'United Republic of Tanzania', value: 44973.33},
{name: 'Uganda', value: 33987.213},
{name: 'Ukraine', value: 46050.22},
{name: 'Uruguay', value: 3371.982},
{name: 'United States of America', value: 312247.116},
{name: 'Uzbekistan', value: 27769.27},
{name: 'Venezuela', value: 236.299},
{name: 'Vietnam', value: 89047.397},
{name: 'Vanuatu', value: 236.299},
{name: 'West Bank', value: 13.565},
{name: 'Yemen', value: 22763.008},
{name: 'South Africa', value: 51452.352},
{name: 'Zambia', value: 13216.985},
{name: 'Zimbabwe', value: 13076.978}
]
}
]
};
myChart.setOption(option);
}
}
ReactDOM.render(
<BingLi />,
document.querySelector('#root')
)
css
#map{
width:800px;
height:600px;
background-color: snow;
margin: 150px auto;
border:1px solid #ddd;
}
实现效果
有显示，但是显示不出地图
我用的是这个博主的方法
https://blog.csdn.net/wallowyou/article/details/53135243
https://www.cnblogs.com/wxqworld/p/11458529.html
参考：https://blog.csdn.net/qq_42281649/article/details/91489475
稍加改动
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
App.js
import React, { Component } from 'react';
import echarts from 'echarts';
import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json';
import { geoCoordMap, provienceData } from './geo';
import logo from './logo.svg';
import './App.css';
class Map extends Component {
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
this.initalECharts();
}
initalECharts() {
const data = [
{ name: '黑龙江', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '吉林', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '辽宁', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '内蒙古', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '北京', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '天津', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '河北', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '山东', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '山西', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '江苏', area: '华东大区', type: 'areaCenterCity', InValue: '0' },
{ name: '上海', area: '华东大区', type: 'areaCenterCity', InValue: '0' },
{ name: '浙江', area: '华东大区', type: 'areaCenterCity', InValue: '0' },
{ name: '福建', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '广东', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '海南', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '台湾', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '香港', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '澳门', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '河南', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '安徽', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
{ name: '江西', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
{ name: '广东', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '陕西', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '湖北', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
{ name: '湖南', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
{ name: '广西', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
{ name: '宁夏', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '重庆', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '贵州', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '四川', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '云南', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '甘肃', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
{ name: '青海', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '西藏', area: '其他', type: 'areaCenterCity', InValue: '0' },
{ name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' }
];
echarts.registerMap('china', geoJson);
for (const item of provienceData) {
if (item.area === '东北大区') {
item.itemStyle = {
normal: {
areaColor: '#3CA2FC',
},
emphasis: {
areaColor: '#3CA2FC',
}
}
} else if (item.area === '华北大区') {
item.itemStyle = {
normal: {
areaColor: '#6CAFBE',
},
emphasis: {
areaColor: '#6CAFBE',
}
}
} else if (item.area === '华中大区') {
item.itemStyle = {
normal: {
areaColor: '#ADD03C',
},
emphasis: {
areaColor: '#ADD03C',
}
}
} else if (item.area === '华东大区') {
item.itemStyle = {
normal: {
areaColor: '#A13614',
},
emphasis: {
areaColor: '#A13614',
}
}
} else if (item.area === '华西大区') {
item.itemStyle = {
normal: {
areaColor: '#FFBA00',
},
emphasis: {
areaColor: '#FFBA00',
}
}
} else if (item.area === '华南大区') {
item.itemStyle = {
normal: {
areaColor: '#FFD300',
},
emphasis: {
areaColor: '#FFD300',
}
}
} else if (item.area === '南海诸岛') {
item.itemStyle = {
normal: {
borderColor: '#fff', // 区域边框颜色
areaColor: '#fff', // 区域颜色
},
emphasis: {
show: false,
// borderColor: '#fff',
// areaColor:"#fff",
}
}
} else {
item.itemStyle = {
normal: {
areaColor: '#D9D9D9',
},
emphasis: {
areaColor: '#D9D9D9',
}
}
}
}
const myChart = echarts.init(document.getElementById('mainMap'));
myChart.setOption({
tooltip: {
show: false, // 不显示提示标签
// formatter: '{b}', // 提示标签格式
//鼠标放地图的某一块，显示的提示框
formatter(params, ticket, callback) {
console.log(params)
return `'批复投资额（亿元）'<br />${params.name}：${params.data.InValue}`
},
backgroundColor: '#ff7f50', // 提示标签背景颜色
textStyle: { color: '#fff' } // 提示标签字体颜色
},
grid: {
left: '10%',
right: '10%',
top: '10%',
bottom: '10%',
containLabel: true
},
geo: {
map: 'china',
roam: false,
zoom: 1.2,
tooltip: {
show: false, // 不显示提示标签
},
label: {
normal: {
show: false, // 显示省份标签
textStyle: { color: '#c71585' }// 省份标签字体颜色
},
emphasis: {// 对应的鼠标悬浮效果
show: false,
textStyle: { color: '#800080' }
}
},
itemStyle: {
normal: {
borderWidth: 0.5, // 区域边框宽度
borderColor: '#000', // 区域边框颜色
areaColor: '#ffefd5', // 区域颜色
label: { show: false }
},
emphasis: {
show: false,
borderWidth: 0.5,
borderColor: '#4b0082',
areaColor: '#ffdead',
}
},
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData(data),
symbolSize: 1,
symbolRotate: 40,
label: {
normal: {
formatter: '{b}',
position: 'top',
show: true
},
emphasis: {
show: false
}
},
tooltip: {
show: false, // 不显示提示标签
// 显示提示的标签
formatter(name) {
return `Legend ${name}`;
}, // 提示标签格式
backgroundColor: '#fff', // 提示标签背景颜色
borderColor: '#ccc',
borderWidth: 5,
textStyle: { color: '#000' } // 提示标签字体颜色
},
itemStyle: {
normal: {
color: 'black'
}
}
},
{
type: 'map',
mapType: 'china',
roam: false,
zoom: 1.2,
tooltip: {
show: false, // 不显示提示标签
},
label: {
normal: {
show: false // 显示省份标签
},
emphasis: {
show: false,
}
},
itemStyle: {
normal: {
borderWidth: 0.5, // 区域边框宽度
borderColor: '#fff', // 区域边框颜色
label: { show: false }
},
emphasis: {
show: false,
}
},
// geoIndex: 0,
//鼠标放入地图显示提示框
tooltip: { show: true },
data: provienceData
}
],
})
// 鼠标放上颜色变红
// myChart.on('mouseover', params => {
// params.color = '#d50000'
// params.event.target.style.fill = '#d50000'
// });
myChart.on('click', params => {
if (params.name === '海南') {
this.props.history.push('/Dashboard/map2')
}
});
}
convertData(data) {
const res = [];
for (let i = 0; i < data.length; i++) {
const geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].area),
area: data[i].area,
type: data[i].type,
InValue: data[i].InValue
});
}
}
return res;
}
convert() {
return '1';
}
render() {
return (
<div id="root">
<h2 style={{ fontSize: 30, color: 'orange', textAlign : 'center', backgroundColor: '#f8f8f8', paddingTop: 20, paddingBottom: 20 }}>投中项目分布图</h2>
<div className="App">
<div id="mainMap" style={{ width: '100vm', height: '100vh' }}></div>
</div>
</div>
);
}
}
export default Map;
注意：文章里提到的geo.js文件，需要手动创建，位置跟index.js相同
如果把上面的
import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json';
改成
import 'echarts/map/js/world';
import geoJson from 'echarts/map/json/world.json';
将会显示世界地图，数据需要结合你的调整下