vue3-echarts-lib

vue3-echarts-lib

基于 Vue 3 + TypeScript + ECharts 6 封装的图表组件库，按需引入，开箱即用。

特性

• 🚀 Vue 3 + TypeScript：完整的类型支持
• 📦 按需引入：基于 ECharts 的按需加载，减小打包体积
• 🎨 丰富图表类型：折线图、柱状图、饼图、散点图、雷达图、仪表盘、漏斗图、热力图等
• 🔧 灵活配置：支持全部 ECharts 原生配置项
• 📐 自动响应：支持窗口大小变化自动 resize
• 🎯 便捷工具函数：提供快速生成常用图表配置的工具方法
• 💪 实例暴露：支持直接操作 ECharts 实例

安装

npm install vue3-echarts-lib echarts
# or
yarn add vue3-echarts-lib echarts
# or
pnpm add vue3-echarts-lib echarts

注意：echarts 和 vue 是 peerDependencies，需要自行安装。

快速开始

全局注册

import { createApp } from 'vue'
import Vue3EChartsLib from 'vue3-echarts-lib'

const app = createApp(App)
app.use(Vue3EChartsLib)
app.mount('#app')

按需引入

<template>
  <LineChart :option="option" height="400px" />
  <BarChart :option="barOption" height="400px" />
  <PieChart :option="pieOption" height="400px" />
</template>

<script setup lang="ts">
import { LineChart, BarChart, PieChart } from 'vue3-echarts-lib'
import { createLineOption, createBarOption, createPieOption } from 'vue3-echarts-lib'

// 方式一：使用工具函数快速生成配置
const option = createLineOption({
  categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  series: [
    { name: 'PV', data: [820, 932, 901, 934, 1290, 1330, 1320], smooth: true },
    { name: 'UV', data: [620, 732, 701, 734, 1090, 1130, 1120], smooth: true, areaStyle: true },
  ],
})

const barOption = createBarOption({
  categories: ['类别A', '类别B', '类别C', '类别D', '类别E'],
  series: [
    { name: '2023', data: [320, 332, 301, 334, 390] },
    { name: '2024', data: [220, 182, 191, 234, 290] },
  ],
})

// 方式二：使用原生 ECharts 配置
const pieOption = createPieOption([
  { name: '直接访问', value: 335 },
  { name: '邮件营销', value: 310 },
  { name: '联盟广告', value: 234 },
  { name: '视频广告', value: 135 },
  { name: '搜索引擎', value: 1548 },
])
</script>

基础组件（完全自定义）

<template>
  <EChartsBase
    ref="chartRef"
    :option="option"
    height="400px"
    :auto-resize="true"
    :loading="loading"
    @chart-ready="onChartReady"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { EChartsBase } from 'vue3-echarts-lib'
import type { EChartsOption } from 'echarts'

const chartRef = ref()
const loading = ref(false)

const option: EChartsOption = {
  // ... 完整的 ECharts 配置
}

function onChartReady(instance: any) {
  console.log('图表初始化完成', instance)
}
</script>

API

EChartsBase Props

EChartsBase 实例方法

通过 ref 获取组件实例，可调用以下方法：

工具函数

useECharts Hook

import { useECharts } from 'vue3-echarts-lib'

const {
  chartInstance,   // ECharts 实例 ref
  initChart,       // 初始化图表
  setOption,       // 设置配置
  refresh,         // 刷新
  clear,           // 清空
  showLoading,     // 显示加载
  hideLoading,     // 隐藏加载
  getDataURL,      // 导出图片
  dispatchAction,  // 派发 Action
  on,              // 绑定事件
  off,             // 解绑事件
} = useECharts({...})

开发

# 安装依赖
npm install

# 开发模式（支持 playground 预览）
npm run dev

# 构建库
npm run build

# 发布到 npm
npm publish

License

MIT