数据图表

数据图表组件是一个基于 ECharts 的数据可视化组件,支持多种图表类型和自定义配置。

功能特性

支持多种图表类型:
- 表格(Table)
- 折线图(Line)
- 柱状图(Bar)
- 饼图(Pie)
- 漏斗图(Funnel)
- 雷达图(Radar)
- 散点图(Scatter)
- 地图(Area)
- 卡片(Card)
自动响应式布局
支持数据导出到 Excel
丰富的配置选项
空数据自动显示占位图
支持本地地图数据，避免网络访问限制

配色方案

地图配色

地图组件使用优化的配色方案，确保数据差异明显可见：

javascript

// 地图配色方案
color: ['#E8F4FD', '#B8D4F7', '#7BA4F0', '#4A7BE8', '#3562e1']

配色说明：

#E8F4FD - 最浅色，表示低值
#B8D4F7 - 浅蓝色，表示较低值
#7BA4F0 - 中蓝色，表示中等值
#4A7BE8 - 深蓝色，表示较高值
#3562e1 - 最深色，表示高值（保持不变）

这个配色方案提供了 5 个渐变层次，确保数据差异清晰可见。

示例

基础用法

折线图

饼图

地图

响应式图表实例

地图 - 基础用法

地图数据配置

下载地图数据

地图组件使用本地地图数据，避免网络访问限制。你可以通过以下步骤下载地图数据：

下载全国和省市地图数据
bash
```
pnpm run download:geo-data
```

手动下载（如果需要）

bash

# 创建目录
mkdir -p public/geo-data

# 下载全国地图数据
curl -o public/geo-data/china.json https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json

# 下载各省市地图数据（示例）
curl -o public/geo-data/110000.json https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json  # 北京市
curl -o public/geo-data/120000.json https://geo.datav.aliyun.com/areas_v3/bound/120000_full.json  # 天津市
# ... 其他省市

地图数据文件结构

下载完成后，public/geo-data/ 目录结构如下：

public/geo-data/
├── china.json          # 全国地图数据
├── provinces.json      # 省市列表信息
├── 110000.json        # 北京市地图数据
├── 120000.json        # 天津市地图数据
├── 130000.json        # 河北省地图数据
└── ...                # 其他省市地图数据

地图数据格式

地图数据采用 GeoJSON 格式，包含以下信息：

json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "adcode": 110000,
        "name": "北京市",
        "center": [116.405285, 39.904989]
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [...]
      }
    }
  ]
}

地图组件使用

地图组件会自动从本地加载地图数据，支持以下功能：

全国地图: 显示中国全境地图
省级地图: 点击省份可切换到该省地图
数据可视化: 支持在地图上展示数据分布
交互功能: 支持缩放、拖拽等交互操作

基础用法

vue

<template>
  <QxsDataChart
    showTypeName="area"
    :chart-data="chartData"
    model-name="全国销售数据分布"
  />
</template>

API

Props

参数	说明	类型	默认值
showTypeName	图表类型	`'bar' \| 'line' \| 'pie' \| 'table' \| 'area' \| 'funnel' \| 'card' \| 'radar' \| 'scatter' \| 'scatter-simple'`	`'table'`
subShowType	图表子类型	`string`	-
modelName	图表标题	`string`	`''`
data	数据源	`EChartData`	-
chartOptions	ECharts 配置项	`EChartsOption`	`{}`

Methods

方法名	说明	参数
exportExal	导出数据到 Excel	-

图表实例访问

组件暴露了响应式的 myChart 实例，可以通过 ref 访问：

vue

<template>
  <QxsDataChart
    ref="chartRef"
    show-type-name="bar"
    :data="chartData"
    model-name="示例图表"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const chartRef = ref()

// 访问图表实例
onMounted(() => {
  // myChart 是响应式的，会自动更新
  const myChart = chartRef.value?.myChart

  if (myChart && !myChart.isDisposed()) {
    // 监听工具栏点击事件（用于埋点等）
    myChart.getZr()?.on('click', (event) => {
      const target = event.target
      if (target?.__title === '保存为图片') {
        // 进行埋点统计
        console.log('用户点击了保存图片')
      }
    })

    // 其他 ECharts 原生方法
    myChart.on('click', (params) => {
      console.log('图表点击:', params)
    })
  }
})
</script>

响应式特性

myChart 是响应式的 ref，可以安全地在任何时机访问
当图表重新创建时，引用会自动更新
支持 Vue 的响应式监听和计算属性

数据格式

typescript

interface EChartData {
  data: Record<string, string | number | null>[] // 数据数组
  desc: {
    colDesc: string[] // 列描述
    groupByDesc: Array<{
      colDesc: string
      groupByDesc: string
      groupByValues: any[]
      xAxis: boolean
    }> // 分组描述
    showDesc: {
      showType: number
      chartOptions: string
      jsCodeSnippet: string
    }
  }
}

注意事项

组件依赖 ECharts,使用前需要安装相关依赖
数据格式需要符合组件要求的结构
图表类型的选择需要和数据结构相匹配
建议给组件设置固定的宽高,否则可能会导致图表显示异常
地图组件注意事项:
- 使用地图组件前需要先下载地图数据
- 地图数据文件需要放在 public/geo-data/ 目录下
- 确保服务器能够访问地图数据文件
- 如果地图显示异常，请检查地图数据文件是否完整
- 地图组件会自动使用本地地图数据，无需额外配置

数据图表

功能特性

配色方案

地图配色

示例

基础用法

折线图

饼图

地图

响应式图表实例

地图 - 基础用法

地图数据配置

下载地图数据

地图数据文件结构

地图数据格式

地图组件使用

基础用法

API

Props

Methods

图表实例访问

响应式特性

数据格式

注意事项

相关脚本

地图数据下载脚本

脚本位置

使用说明

数据图表 ​

功能特性 ​

配色方案 ​

地图配色 ​

示例 ​

基础用法 ​

折线图 ​

饼图 ​

地图 ​

响应式图表实例 ​

地图 - 基础用法 ​

地图数据配置 ​

下载地图数据 ​

地图数据文件结构 ​

地图数据格式 ​

地图组件使用 ​

基础用法 ​

API ​

Props ​

Methods ​

图表实例访问 ​

响应式特性 ​

数据格式 ​

注意事项 ​

相关脚本 ​

地图数据下载脚本 ​

脚本位置 ​

使用说明 ​

数据图表

功能特性

配色方案

地图配色

示例

基础用法

折线图

饼图

地图

响应式图表实例

地图 - 基础用法

地图数据配置

下载地图数据

地图数据文件结构

地图数据格式

地图组件使用

基础用法

API

Props

Methods

图表实例访问

响应式特性

数据格式

注意事项

相关脚本

地图数据下载脚本

脚本位置

使用说明