react ts Echart地图散点地图

项目引入Echart

npm install echarts --save

YunNan.json下载

http://datav.aliyun.com/portal/school/atlas/area_selector

index.tsx页面

import { useEffect } from "react"
import * as echarts from 'echarts'; //全局引入 ，可按需引入
import YunNan from "../../YunNan.json";
import "./map.css";

const seriesData = [
  { name: '昆明市', value: 245 },
  { name: '大理白族自治州', value: 100 },
  { name: '丽江市', value: 17 }
];
const Echarts = () => {
  let myChart: string | echarts.ECharts | null | undefined;
  useEffect(() => {
    loadingChina()
  }, [])

  const loadingChina = () => {
    mapOption("YunNan", YunNan)  //初始化-创建地图
  }

  const mapOption = (mapName: string, data: any) => {
    if (myChart !== null && myChart !== "" && myChart !== undefined) {
      myChart.dispose();//销毁（如果存在需要销毁，点击时会创建新的图表对象）
    }
    myChart = echarts.init(document.querySelector('.map'));//初始化

    echarts.registerMap(mapName, data)

    const geoCoordMap = data.features.map((item: { properties: { name: any; center: any; }; }) => {
      return {
        name: item.properties.name,
        value: item.properties.center
      }
    });

    const convertData = (data: string | any[]) => {
      const res = [];
      for (let i = 0; i < data.length; i++) {
        if (geoCoordMap.filter((item: { name: any; }) => item.name === data[i].name).length)
          res.push({
            name: data[i].name,
            value: geoCoordMap.filter((item: { name: any; }) => item.name === data[i].name)[0].value.concat(data[i].value)
          })
      }
      return res;
    }

    const option = {
      title: {
        top: 20,
        text: '地图展示',
        subtext: '',
        x: 'center',
        textStyle: {
          color: '#FFF',
          fontSize: "48px"
        }
      },
      tooltip: {
        trigger: 'item',
        formatter(params: { name: any; value: any[]; }) {
          return `${params.name}:${params.value[2]}`;
        },
      },
      roam: true,
      zoom: 1.5,   //设置地图放大
      legend: {
        orient: 'vertical',
        y: 'bottom',
        x: 'right',
        data: ['xxx分布'],
        textStyle: {
          color: '#fff',
          fontSize: 28
        },
      },
      geo: {
        map: mapName,
        roam: true,
        geoIndex: 1,
        zoom: 1.2,  //地图的比例
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#FFFFFF',  //字体颜色
              fontSize: 28
            }
          },
          emphasis: {
            textStyle: {
              color: '#FFFFFF',  //选中后的字体颜色
              fontSize: 28
            }
          }
        },
        itemStyle: {
          normal: {
            areaColor: 'rgb(119, 224, 242)', //地区填充颜色
            borderColor: 'rgba(0, 162, 255, 0.8)',//边界线颜色
            shadowColor: 'rgb(119, 224, 242)',//阴影颜色
            shadowBlur: 20,//模糊大小
            borderWidth: 2,
            colorStops: [{
              offset: 0, color: '#0AFBFF'
            }, {
              offset: 1, color: '#0157C9'
            }],
          },
          emphasis: {  //选中样式
            areaColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#0AFBFF'
              }, {
                offset: 1, color: '#0157C9'
              }],
              global: false
            },
          }
        },
      },
      series: [
        {
          name: 'xxx分布',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(seriesData),
          symbolSize(val: number[]) {
            return (val[2] / 100) * 15 + 5;
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 28,
              }
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            color: 'red',
            normal: {
              label: {
                show: true,
                fontSize: 28
              },
              borderWidth: 20,
            },
            emphasis: {
              borderColor: '#fff',
              borderWidth: 20,
              fontSize: 28
            },
          },
        },
        {
          name: 'xxx分布',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(
            seriesData
              .sort((a, b) => {
                return b.count - a.count;
              })
              .slice(0, 5),
          ),
          symbolSize(val: number[]) {
            return (val[2] / 100) * 15 + 5;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke',
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'left',
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: 'red',
              shadowBlur: 100,
              shadowColor: 'red',
              fontSize: 28
            },
          },
          zlevel: 1,
        },
      ],
    };

    myChart.setOption(option); //绘图

    myChart.getZr().on('click', function (params) {
      const pixelPoint = [params.offsetX, params.offsetY];
      const dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
      console.log(dataPoint);
    });
  }

  return (
    <div className="map" />
  )
}
export default Echarts;

map.css页面

.map{
    height: 100vh;
    width: 100%;
}