react中使用echarts渲染地图

安装echarts相关依赖

npm install echarts
npm install echarts-for-react

下载中国地图json

有很多方式这里我直接使用的方式 这里使用阿里云下载地图json文件到本地

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

注意：react不支持直接直接模块导入json文件 这里要把json文件重命名为 china.tsx 或者 china.js 然后模块导出来 开头加上

export const china:any =

注册地图

在入口文件加入代码

//echarts
import * as echarts from 'echarts/core';
import {china} from "./utils/map/china";

//注册中国地图
echarts.registerMap("china", china, {});

子组件使用

import React from 'react';
import ReactECharts from 'echarts-for-react';


const Page: React.FC = () => {   
    // 地图配置项 （地图配置项我就省略了 这个要去echart官方查看文档 我配置好再发布一篇文章讲解）
    let chinaMap = {}
    
    return(
        <>
          <ReactECharts style={{height:'1500px'}} option={chinaMap} />                
        </>    
    )
}

最终结果：