react中引入echarts中国地图_echarts-for-react如何引入地图数据

1.首先写一个容器div去装地图
注意设置div的长和高！！

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

2.安装echarts并引入项目中

import echarts from 'echarts'
1

3.引入中国地图的json文件

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

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);
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

5.componentDidMount去调用上述函数

componentDidMount(){    //页面挂载完毕加载图表echarts
        this.loadMap()
}
1
2
3

效果如下：

另外，如果地图显示之后标签位置错位，可以通过设置相关的json文件进行修改
features->properties->添加cp属性进行修改

"cp":[114.352562,36.098101]
1