1.首先寫一個容器div去裝地圖
注意設置div的長和高！！

<div className="map" style={{width:"500px";height:"500px"}}></div>

2.安裝echarts并引入項目中

import echarts from 'echarts'

3.引入中國地圖的json文件

import china from 'echarts/map/json/china.json'

4.把地圖需要的配置項option寫到相應的函數中

loadMap = ()=>{var myChart = echarts.init(document.querySelector('.map'));echarts.registerMap('china', china)var option = {tooltip : {trigger: 'item', },geo: {map: 'china',label: {emphasis: {show: true,color:'#fff'}},zoom:1.0, //設置地圖放大roam: true,itemStyle: {normal: {areaColor: 'rgb(20, 41, 87,0.6)',borderColor: '#195BB9',borderWidth: 1,},emphasis: {areaColor: '#2B91B7'}}},};myChart.setOption(option);}

5.componentDidMount去調用上述函數

componentDidMount(){ //頁面掛載完畢加載圖表echartsthis.loadMap() }

效果如下：

另外，如果地圖顯示之后標簽位置錯位，可以通過設置相關的json文件進行修改
features->properties->添加cp屬性進行修改

"cp":[114.352562,36.098101]

總結

以上是生活随笔為你收集整理的react中引入echarts中国地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。