echarts 开发小技巧

=> 设置地图区域渐变色：areacolor-global

　　option.geo.itemStyle 设置如下：

   

 注释：global 属性值表示是全局渐变还是局部渐变。

 

 => 把中国地图的南海诸岛做成缩略图（这样可以优化地图的纵向空间）

 　　（1）获取geoJson数据

 　　 　　通过后台接口 或者 阿里云的DataV 获取 geoJson数据 如下：　　　　

 （2）geoJson数据处理

 

（3）echarts加载地图

 　　　　echarts.registerMap(‘china’, geoJsonData);   // 注册地图，此处的 geoJsonData 即为上述的 mapGeoJsonRef.current
 　　　　const option = {
 　　　　　　...

　　　　　　geo: {

              name: '中国',

              z: 5,

              show: true,

              map: 'china',　　 // 此属性值设置为 china（小写），echarts 会默认给地图添加南海群岛缩略图

　　　　　　},

　　　　...

　　　　}

　　　　const myChart = echarts.init(document.getElementById('myMap'));

　　　　myChart.setOption(option, true);

 

　　注释：当然，如果不想使用echarts默认展示的南海群岛缩略图，自己也可以去浏览器搜索一下南海群岛缩略图的坐标数据，然后将该数据添加到geoJsonData中即可。

 

 

 

 

 

 

。。。（未完待续）