Echarts 3D地图图表

需求：实现如图所示的3D地图图表

 

（1）原本使用的highcharts没有3d地图的功能，搜索插件也没有可替代的方案，选择echarts理由是在地图方面百度拥有毋庸置疑的实力

ECharts3D地图(详细示例——附有具体注释)_GRAY_KEY的博客-CSDN博客

（2）通过代码可以轻易写出例子的效果，但是想要写特定区域的地图则需要该地区相对应的json文件，需要通查询对应地区的相关的json文件，详细步骤如链接。

DataV.GeoAtlas地理小工具系列

 

选择需要的区域，并下载json文件即可

（3）通过替换json文件即可展示该地区的3D地图，图片中在3D地图的基础上还有一个柱形图，然后找到了这个例子，又牵扯到一个维度的问题，是实现过程中最难理解的部分，主要原理就是用visualMap属性来连接两个series实现的图表

https://gallery.echartsjs.com/editor.html?c=xLIkpVNt4M

（4）各个地区板块之间有一个高度的差异,查到的是通过给regionHeight的大小来实现，但是实际上使用的时候没有效果，官方文档写的也是语焉不详，之后用height属性可以实现

---

2023更新

使用geo3D API实现3D地图

需要在地图中加入柱状图，在series中配置柱状图即可

series:[{
    type: 'bar3D',
    coordinateSystem: 'geo3D',
    data: [
      {name: "南宁市", value: [108.320004,22.82402, 111], itemStyle: {color:'skyBlue'}},
      {name: "防城港市", value: [108.345478,21.614631, 222], itemStyle: {color:'orange'}},
      {name: "柳州市", value: [109.411703,24.314617, 88], itemStyle: {color:'orange'}},
    ],
    barSize: 1,
    // 注意：如果配置了区域的高度，minHeight需要高过配置的高度，不然出不了柱状图
    minHeight: 1,
    silent: true,
    itemStyle: {
      color: 'green'
    }
 }]

完整代码：

最终效果