Tui Plus Vapor

Appearance

地图演示 ​

地图演示https://yundie.xyz/x-charts-demo/index.html?type=map

参考配置 ​

基础地图 ​

html
<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'map',
  animation: true,
  series: [{
    name: '数据',
    data: [
      { name: '北京', value: 100, color: '#2979ff' },
      { name: '上海', value: 80, color: '#19be6b' },
      { name: '广州', value: 60, color: '#ff9800' },
      { name: '深圳', value: 90, color: '#f44336' }
    ]
  }]
});
</script>

配置说明 ​

type ​

图表类型，设置为 'map' 表示地图。

series ​

数据系列配置：

  • name: 系列名称
  • data: 数据数组，每个元素包含：
    • name: 地区名称
    • value: 数值
    • color: 颜色

地图用于在地理地图上展示数据分布。