RayChart

Appearance

3D 地图 ​

3D 地图用于展示地理数据的可视化，支持中国地图及各省市地图，可以呈现区域数据分布。

快速开始 ​

vue
<template>
  <RayMap3D :option="chartOption" />
</template>

<script setup>
import { ref } from 'vue'
import { RayMap3D } from 'raychart'

const chartOption = ref({
  series: [{
    map: 'china',
    data: [
      { name: '北京', value: 100 },
      { name: '上海', value: 200 },
      { name: '广东', value: 300 }
    ]
  }]
})
</script>

核心配置 ​

属性类型默认值说明
mapstring-地图类型（如 'china'）
dataArray-地图数据
itemStyleobject-地图样式配置

数据格式

地图数据需要包含 name（地区名称）和 value（数值）字段。

常见场景 ​

自定义样式 ​

vue
<script setup>
const chartOption = ref({
  series: [{
    map: 'china',
    data: [
      { name: '北京', value: 100 },
      { name: '上海', value: 200 }
    ],
    itemStyle: {
      color: '#42b883',
      metalness: 0.3,
      roughness: 0.5
    }
  }]
})
</script>

区域高亮 ​

vue
<script setup>
const chartOption = ref({
  series: [{
    map: 'china',
    data: [
      { name: '北京', value: 100, itemStyle: { color: '#ff6b6b' } },
      { name: '上海', value: 200, itemStyle: { color: '#4ecdc4' } },
      { name: '广东', value: 300, itemStyle: { color: '#45b7d1' } }
    ]
  }]
})
</script>

地图编辑器 ​

RayChart 提供了专门的地图编辑器，可以可视化地配置 3D 地图：

使用地图编辑器

访问 地图编辑器 可视化配置地图样式、数据和交互效果。

组件属性 ​

属性类型默认值说明
optionRayChartOption-图表配置对象（必填）
widthstring | number'100%'图表宽度
heightstring | number'600px'图表高度

相关文档 ​