[echarts]基础地图

实现基础地图，可以拖拽。

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';import geoJson from './china.json';   //从网上down一下china.jsonconst Map = ({ mapDetails = [] }) => {  //mapDetails中有具体要点亮的地区信息，地名要跟china.json中对上const chartRef = useRef(null);useEffect(() => {if (chartRef.current) {echarts.registerMap('china', geoJson);const chartMap = echarts.init(chartRef.current);const option = {//这里如果注释的话就不会展示tooltip// tooltip: {//     trigger: 'item',//     alwaysShowContent: true,//     show: true,// },roam: true,geo: {map: 'china',zoom: 1.8,center: [115.97, 29.71],  //地图的中心坐标scaleLimit: {min: 1,max: 3},itemStyle: {borderColor: "rgba(147, 235, 248, 1)",areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.9,colorStops: [{offset: 0,color: "rgba(17, 217, 245, 0.3)",},{offset: 1,color: "rgba(10, 209, 231, 0.02)",},],globalCoord: false,},borderWidth: 1,},emphasis: {  //鼠标到一个地区上面的样式展示label: {show: true,color: "#ffffff",},itemStyle: {areaColor: "#026aa9",borderColor: "#fff",borderWidth: 2,},},regions: mapDetails.map(item => {return {name: item.province,itemStyle: {areaColor: '#2FBCEB',},}}),//本来想做一个鼠标到地区上面之后展示tooltip的样式，领导说要一直展示，但是tooltip每次只能展示一个，所以改用了labeltooltip: {  show: false,trigger: 'item',alwaysShowContent: true,formatter: function (params) {const currentCity = mapDetails.find(item => item.province == params.name)if (!!currentCity) {return `${currentCity.province}: 在线${currentCity.online}台, 离线${currentCity.offline}台`;}},backgroundColor: '#13ADF2',textStyle: {color: '#fff',fontSize: '0.8rem',}},label: {show: true,color: '#fff',fontSize: '0.8rem',formatter: function (params) {const currentCity = mapDetails.find(item => item.province == params.name)if (!!currentCity) {return `${currentCity.province}:在线${currentCity.online}台,离线${currentCity.offline}台`;} else {return ''}},offset: [110,0],textStyle: {color: '#fff',fontSize: '0.8rem',}}}};chartMap.setOption(option);const handleResize = () => {chartMap.resize();};window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);chartMap.dispose();};}}, [mapDetails]);return (<><div className={styles['card-content']}><div style={{ width: '100%', height: '100%' }} ref={chartRef}></div></div></>)}export default Map;