使用echarts-for-react和echart.js 配置map图表时，地图未渲染问题

Question

题中说到的map图表是官网的这个示例

控制台没有任何报错，并且局部渲染完成，仅地图没有渲染，大概是这样的

代码已上传到github

Answer 1

ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积。地图下载页也关闭了下载服务。

以下是解决方法：

import ReactEcharts from "echarts-for-react"
import echarts from 'echarts';
import chinaJson from 'echarts/map/json/china.json'; //引入地图数据

...
echarts.registerMap('china', chinaJson); //将地图数据注册到echart对象上，其它不变

...
<ReactEcharts
    option={this.option3}
    notMerge={true}
    lazyUpdate={true}
    onChartReady={this.onChartReadyCallback}
    onEvents={EventsDict}
    opts={null} />

Answer 2

地图JSON数据未引入的问题

1. 使用全局echarts.js
   你需要引入echart-china
2. 自定义封装

   你只需要提取echart-china中的JOSN数据,
   通过你定义的echarts自行注册,类似这样： echarts.registerMap('china',地图JSON)

相关链接：

• echart-china
• echart-registerMap