Map did not render problem when configuring map chart using echarts-for-react and echart.js

The map chart mentioned in the

question is the example of the official website

. The

console does not report any errors, and the local rendering is complete, only the map is not rendered, something like this

The

code has been uploaded to github

React.js echarts echarts4 javascript

Apr.15,2022

< H2 > problems not introduced by map JSON data < / H2 >

use global echarts.js
you need to introduce echart-china
Custom encapsulation
you just need to extract the JOSN data from echart-china , and
register yourself through the echarts you define, like this: echarts.registerMap ('china', Map JSON)

< H2 > related links: < / H2 >

ECharts 3, because of the improvement of map accuracy, map data is no longer built in to increase the code volume. The map download page also turned off the download service.

here is the solution:

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} />

Previous: How to use vue-echarts.js. Don't know how to call it.

Next: Does vue have a plug-in like this date selector, picker, look at the picture