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


< H2 > problems not introduced by map JSON data < / H2 >
  1. use global echarts.js
    you need to introduce echart-china
  2. 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 >
In

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} />
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31236-40db0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31236-40db0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?