ECharts GL | 3D 地图区域高度设置

3D 地图除了使用柱状图表现数值高低（参考ECharts GL | 3D 柱状图），还可以直接通过区域高度表达数据大小，常用于绘制建筑高度。

 

 

例如使用区域高度展示人口数据，加上颜色区分视觉效果更好：

人口数据结构如下，重点是用 height 属性定义每个区域的高度：

var populationData = [
  {name: '荔湾区', value: 113.5, height: 1.07},
  {name: '越秀区', value: 98, height: 0.92},
  {name: '海珠区', value: 176.99, height: 1.66},
  {name: '天河区', value: 224.31, height: 2.11},
  {name: '白云区', value: 369.56, height: 3.48},
  {name: '黄埔区', value: 123.52, height: 1.16},
  {name: '番禺区', value: 284.53, height: 2.68},
  {name: '花都区', value: 175.06, height: 1.65},
  {name: '南沙区', value: 98.39, height: 0.93},
  {name: '从化区', value: 73.97, height: 0.7},
  {name: '增城区', value: 159.97, height: 1.5}
];

 

配置项设置如下，在 map3D 图表中使用人口数据：

{
  title: {
    text: '广州市2024年末常住人口',
    subtext: '单位：万人',
  },
  visualMap: {
    left: 'right',
    min: 70,
    max: 400,
    inRange: {
      color: [
        "#fef0d9", "#fdcc8a", "#fc8d59", "#e34a33", "#b30000"
      ]
    },
    text: ['High', 'Low'],
    calculable: true,
  },
  series: [
    {
      type: 'map3D',
      map: 'guangzhou',
      boxWidth: 60,
      viewControl: {
        projection: 'orthographic',
        alpha: 35,
      },
      label: {
    show: true,
    color: '#000',
    formatter: '{b}\n{c}',
      },
      data: populationData 
    }
  ]
}