最简单的react+echarts画地图

在开始之前我们需要china.json或者china.js

没有的话戳这里

第一部

npm i echarts --save

第二部 

import * as echarts from 'echarts'  //全部引用

import china from './china.json'  //你准备好的china.json

当然了。除了全部引用你也可以按需引用，就是按路径引用里面的小模块

第三部

<div id="main" style={{width:"100%",height:"500px"}}></div> 

 这边的话最好是给对象设置个宽高以免被其他样式污染了导致看不到效果

最后就是开始配置地图了

const myecharts = echarts.init(document.getElementById("main"))
echarts.registerMap("china", china)//第一个参数是你定义的字符串，下面map要用到，第二个就是你刚刚引入的china.json
var option
myecharts.setOption(option = {
    geo: {
       map: "china",
       show: true,
    }
})

做到以上的话我们的地图轮廓就已经出来啦！

除此之外我们也可以把option对象中的geo给替换成

            series:[{
                type:"map",
                map:"china"
            }]

这样也可以实现同样的效果，但是略微不同

那光有地图是不行的，我们给他来点坐标点，在series里面加上

            {
                type: 'effectScatter',
                coordinateSystem: 'geo',//使用地理坐标系geo
                data: [
                    [120.13, 33.38],
                    [118.87, 42.28],
                    [120.33, 36.07],
                ]
            }

使用这个话就会给地图加上坐标点啦，但是记得这个时候option对象中要存在geo对象哦

效果如下：

echarts官网中提供了很多犹如此类的配置项，大家可以去官网看，比如标题，工具箱，颜色，高亮显示之类的。