Echarts绘制地图，且可以下钻到省区

Little_Pig_Bug

已于 2022-08-04 15:40:25 修改

阅读量1.5k

点赞数 1

分类专栏： React ECharts 文章标签： javascript 前端开发语言

于 2022-08-04 15:08:54 首次发布

本文链接：https://blog.csdn.net/Little_Pig_Bug/article/details/126143441

版权

点击前

点击后(山东省为例)

1. 安装echarts，echarts按需引入
npm install echarts --save

//引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口
import * as echarts from 'echarts/core';

2.引入echarts后，基于准备好的dom，初始化echarts实例。

const ChartMap = (props) =>{
const {id} = props;
const [name, setName] = useState('china');

 const renderMap = (code, name) => {
    const chartId = document.getElementById(id);
    const myChart = echarts.getInstanceByDom(chartId as HTMLElement);
    if (myChart) {
      mapInstance = myChart;
    } else {
      mapInstance = echarts.init(chartId as HTMLElement);
    }
  };

  const chinaMapConfig = (name, data) => {
    // 地图配置
   const option = {...}
    mapInstance.clear();
    mapInstance.setOption(option);
  }

  useEffect(() =>{
    renderMap(name);
  },[name])

  return (
    <div style={
  { width: "100%", height: "70vh" }} id={id}></div>
  );
};
export default ChartMap;

3. 使用echarts.registerMap 注册可用地图

import { MapChart } from 'echarts/charts';
//使用visiualMap来配置图表根据值的范围显示特定的颜色
import { VisualMapComponent } from 'echarts/components';

// 必须在使用 use 方法注册了 MapChart 后才能使用 registerMap 注册地图
 echarts.registerMap(name, data); // name: 地图当前名称和地图的地理数据

4. 地图数据下载，推荐