中国地图
首先需要一个包含中国所有省份名称的 json，这个好多网站都能找到。
我传到资源里了，放百度网盘怕太长时间不登录给我删掉了。
我把地图抽出来单独做成了组件，这样用的时候比较方便.
使用的时候：
js
import ChinaMap from './modules/chinaMap';
......
const dataList = [
{"name":"北京","value":2000},
{"name":"福建","value":4000},
{"name":"上海","value":8000},
{"name":"河北","value":3000},
{"name":"山东","value":5000},
]
......
<ChinaMap data={dataList} min={0} max={10000}/>代码最上面引入的 China.json 就是之前提到的包含中国所有省份名称的json.
echartsMapClick 这个方法是点击地图模块才触发的事件，我没有这个需求，所以空着了。
js
import china from './China.json';
import * as echarts from 'echarts'; //全局引入 ，可按需引入
import { useEffect, useRef } from 'react';
const Map = (props) => {
const chartRef = useRef();
const {min,max} = props;
const echartsMapClick = () => {
//点击地图模块逻辑事件
};
const mapOption = (mapName, data) => {
const myChart = echarts.init(chartRef.current);
echarts.registerMap(mapName, data);
const option = {
tooltip: {
backgroundColor: 'rgba(21, 24, 45, 0.9)', // 提示框浮层的背景颜色。
textStyle: {
// 提示框浮层的文本样式。
color: '#fff',
fontSize: 14,
},
extraCssText: 'border-color: rgba(21, 24, 45, 0.9);',
formatter: function (params) {
//数据格式化
const val = params.value ? params.value : 0;
if (params.value) {
return (
params.name + '<br />' + params.seriesName + '：' + val
);
} else {
return '暂无数据';
}
},
},
toolbox: {
show: true,
//orient: 'vertical',
left: 'left',
top: 'top',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 0,
max: max,
left: 'left',
top: 'bottom',
text: [max, min], //取值范围的文字
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
},
show: true, //图注
},
geo: {
map: 'china',
roam: false, //不开启缩放和平移
zoom: 1.23, //视角缩放比例
label: {
normal: {
show: true,
fontSize: '10',
color: 'rgba(0,0,0,0.7)',
},
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)',
},
emphasis: {
areaColor: '#4BD6C7', //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
series: [
{
name:'交易量',
type: 'map',
geoIndex: 0,
data: props.data,
},
],
};
myChart.setOption(option); //绘图
//点击画布内还是画布外
myChart.getZr().on('click', (params) => {
if (params.target) {
myChart.on('click', echartsMapClick); //增加点击事件
}
});
};
const loadingChina = () => {
mapOption('china', china); //初始化-创建中国地图
};
useEffect(() => {
loadingChina();
}, [props.data]);
return <div style={{ width: '100%', minHeight: '500px' }} ref={chartRef} />;
};
export default Map;世界地图
世界地图也需要一个包含所有国家名称的json，但是我没找到免费的中文版，所以用的英文版.
使用的时候：
js
import WorldMap from './modules/worldMap';
......
const worldDataList = [{"name":"北京","value":2000},{"name":"福建","value":4000}]
......
<WorldMap data={worldDataList} />组件代码：
js
import world from './world.json';
import * as echarts from 'echarts'; //全局引入 ，可按需引入
import { useEffect, useRef } from 'react';
const WorldMap = (props) => {
const chartRef = useRef();
const topNumber = props.data[0].value;
const bottomNumber = props.data[props.data.length - 1].value;
const echartsMapClick = (target) => {
//点击地图模块逻辑事件
console.log(target)
};
const mapOption = (mapName, data) => {
const myChart = echarts.init(chartRef.current);
echarts.registerMap(mapName, data);
const option = {
tooltip: {
backgroundColor: 'rgba(21, 24, 45, 0.9)', // 提示框浮层的背景颜色。
textStyle: {
// 提示框浮层的文本样式。
color: '#fff',
fontSize: 14,
},
extraCssText: 'border-color: rgba(21, 24, 45, 0.9);',
formatter: function (params) {
//数据格式化
const val = params.value ? params.value : 0;
if (params.value) {
return (
params.name + '<br />' + params.seriesName + '：' + val
);
} else {
return '暂无数据';
}
},
},
visualMap: {
min: 0,
max: topNumber,
left: 'right',
top: 'bottom',
text: [topNumber, bottomNumber], //取值范围
inRange: {
color: ['#D2DDFF', '#6E92FF'], //取值范围的颜色
},
show: true, //图注
},
geo: {
map: 'world',
roam: false, //不开启缩放和平移
zoom: 1.23, //视角缩放比例
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)',
},
emphasis: {
areaColor: '#4BD6C7', //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
series: [
{
name:'交易量',
type: 'map',
geoIndex: 0,
data: props.data,
},
],
};
myChart.setOption(option); //绘图
//点击画布内还是画布外
myChart.getZr().on('click', (params) => {
if (params.target) {
myChart.on('click', echartsMapClick(params)); //增加点击事件
}
});
};
const loadingWorld = () => {
mapOption('world', world); //初始化-创建中国地图
};
useEffect(() => {
loadingWorld();
}, [props.data]);
return <div style={{ width: '100%', minHeight: '500px' }} ref={chartRef} />;
};
export default WorldMap;最终效果
