图表组件使用文档

目录

• 组件概述
• 组件架构
• ChartItem 组件
  • 功能特点
  • 属性说明
  • 使用示例
• ChartGroup 组件
  • 功能特点
  • 属性说明
  • 方法说明
  • 使用示例
• ChartDemo 组件
  • 功能特点
  • 使用示例
• 高级功能
  • 自动轮播 Tooltip
  • 图表联动
  • 数据缩放
• 最佳实践

组件概述

本文档介绍了基于 Vue 3 和 ECharts 开发的三个图表组件：

1. ChartItem - 基础图表组件，用于渲染单个图表
2. ChartGroup - 图表组组件，用于管理多个图表并提供联动功能
3. ChartDemo - 示例组件，展示了如何使用 ChartGroup 和 ChartItem 创建复杂的图表展示

这些组件设计用于创建交互式、响应式的数据可视化界面，特别适合展示模型评估、数据分析等场景。

组件架构

这三个组件形成了一个层次化的结构：

scss
 代码解读
复制代码
ChartDemo
   └── ChartGroup
         ├── ChartItem (图表1)
         ├── ChartItem (图表2)
         └── ChartItem (图表3)

• ChartDemo 作为容器组件，负责整体布局和控制逻辑
• ChartGroup 管理多个 ChartItem 组件，提供图表联动和自动轮播功能
• ChartItem 负责单个图表的渲染和基本交互

ChartItem 组件

功能特点

• 支持多种图表类型（折线图、柱状图、饼图、散点图）
• 自动响应窗口大小变化
• 支持自定义配置和样式
• 与 ChartGroup 组件无缝集成

属性说明

使用示例

vue
 代码解读
复制代码

ChartGroup 组件

功能特点

• 管理多个 ChartItem 组件
• 提供图表联动功能
• 支持自动轮播 Tooltip
• 支持鼠标悬停暂停
• 支持数据缩放同步

属性说明

方法说明

使用示例

vue
 代码解读
复制代码

ChartDemo 组件

功能特点

• 展示完整的图表应用场景
• 提供 Tooltip 控制面板
• 支持多种图表布局
• 响应式设计

使用示例

vue
 代码解读
复制代码

高级功能

自动轮播 Tooltip

ChartGroup 组件提供了强大的自动轮播 Tooltip 功能，可以自动展示图表中的数据点，提高数据可视化的交互性。

工作原理：

1. 组件内部维护一个定时器，按照设定的间隔依次显示每个图表的 Tooltip
2. 支持鼠标悬停暂停功能，当用户与图表交互时暂停自动轮播
3. 支持自定义轮播间隔、展示时长和循环延迟
4. 自动处理数据缩放，确保 Tooltip 始终显示在可见区域内

使用示例：

vue
 代码解读
复制代码

  :auto-tooltip="true"
  :tooltip-interval="3000"
  :tooltip-duration="2000"
  :tooltip-loop-delay="2000"
  :pause-on-hover="true"
>
  

图表联动

ChartGroup 组件通过 ECharts 的 connect 功能实现图表联动，当用户与一个图表交互时，其他图表会同步响应。

工作原理：

1. 组件为所有子图表分配相同的 groupId
2. 使用 echarts.connect(groupId) 建立图表间的连接
3. 当用户缩放、平移或高亮某个图表时，其他图表会同步更新

使用示例：

vue
 代码解读
复制代码

  
    type="line"
    title="图表1"
    :xAxisData="xAxisData"
    :series="series1"
    :options="{
      dataZoom: [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          start: 0,
          end: 100,
        }
      ]
    }"
  />
  
    type="bar"
    title="图表2"
    :xAxisData="xAxisData"
    :series="series2"
    :options="{
      dataZoom: [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          start: 0,
          end: 100,
        }
      ]
    }"
  />

数据缩放

组件支持数据缩放功能，允许用户查看大量数据中的特定部分。

工作原理：

1. 通过 dataZoom 配置启用数据缩放功能
2. 支持滑块和内部缩放两种方式
3. 当用户缩放一个图表时，其他图表会同步缩放范围

使用示例：

javascript
 代码解读
复制代码
const commonOptions = {
  dataZoom: [
    {
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      start: 0,
      end: 100,
      id: 'dataZoomX',
      realtime: true,
    },
    {
      type: 'inside',
      start: 0,
      end: 100,
      id: 'dataZoomInside',
      xAxisIndex: [0],
    },
  ],
};

// 在 ChartItem 中使用
<ChartItem
  type="line"
  title="图表"
  :xAxisData="xAxisData"
  :series="series"
  :options="commonOptions"
/>

最佳实践

1. 合理设置轮播间隔：根据数据量和用户阅读速度调整 tooltipInterval，建议在 2000-5000 毫秒之间
2. 启用悬停暂停：设置 pauseOnHover 为 true，提高用户体验
3. 使用响应式布局：利用 CSS Grid 或 Flex 布局创建响应式图表布局
4. 统一数据格式：确保所有图表使用相同的数据格式和结构，便于维护
5. 自定义 Tooltip 格式：根据数据特点自定义 Tooltip 的显示格式，提高可读性

javascript
 代码解读
复制代码
// 自定义 Tooltip 格式示例
const priceChartOptions = {
  tooltip: {
    formatter: function (params) {
      let result = params[0].name + '
';
      params.forEach((item) => {
        result += `${item.marker}${item.seriesName}: ${item.value} 元/kWh
`;
      });
      return result;
    },
  },
};

通过以上组件和功能，您可以创建功能丰富、交互性强的数据可视化界面，满足各种业务场景的需求。