中国地图

首先需要一个包含中国所有省份名称的 json，这个好多网站都能找到。
我传到资源里了，放百度网盘怕太长时间不登录给我删掉了。

中国地图中文版json

我把地图抽出来单独做成了组件，这样用的时候比较方便.

使用的时候：

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 这个方法是点击地图模块才触发的事件，我没有这个需求，所以空着了。

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，但是我没找到免费的中文版，所以用的英文版.

世界地图json

使用的时候：

import WorldMap from './modules/worldMap';
......const worldDataList = [{"name":"北京","value":2000},{"name":"福建","value":4000}]......<WorldMap data={worldDataList} />

组件代码：

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;

最终效果