Echarts 图表组件

组件介绍

ths-echarts 是一个基于 Vue3 和 ECharts 封装的图表组件，提供了以下特性：

• 🚀 简化 ECharts 的使用方式
• 📊 自动处理图表渲染和更新
• 🔄 响应式适配窗口变化
• 🧹 自动清理图表实例

安装

npm install echarts

参数配置

Props

| 参数名 | 说明 | 类型 | 默认值 | 是否必填 | |--------|------|------|--------|----------| | domId | 图表容器的唯一标识 | String | - | 是 | | option | ECharts 的配置项 | Object | - | 是 |

Methods

| 方法名 | 说明 | 参数 | |--------|------|------| | renderCharts | 手动重新渲染图表 | - |

使用示例

<template>
  <div style="height: 300px">
    <ths-echarts 
      ref="chartRef"
      domId="my-chart" 
      :option="chartOption" 
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const chartOption = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }]
})

// 获取组件实例
const chartRef = ref(null)

// 更新数据后手动重新渲染
const updateChart = () => {
  chartOption.value.series[0].data = [150, 230, 224, 218, 135, 147, 260]
  chartRef.value.renderCharts()
}
</script>

特性说明

自动渲染

• 组件在挂载完成后会自动渲染图表
• 当 option 配置发生变化时，会自动重新渲染

自适应调整

• 监听窗口 resize 事件，自动调整图表大小
• 页面初始化时会延迟 1 秒进行一次自适应调整

资源清理

• 组件卸载时会自动清理 ECharts 实例
• 清除相关的事件监听和定时器

注意事项

1. 确保容器元素具有明确的宽高，否则图表可能无法正确显示
2. domId 在同一页面中必须唯一
3. 深度监听 option 变化，无需手动调用 renderCharts
4. 组件默认占满父容器的 100% 宽高

配置参考

更多 ECharts 配置项请参考 ECharts 配置项文档