@hz_yujin/vue-charts

基于 Vue 3 + ECharts 的图表组件。

• ProChart — 通用 option 封装（resize / loading / theme）
• ProLineChart — 折线图
• ProBarChart — 柱状图

安装

npm install @hz_yujin/vue-charts echarts vue

echarts、vue 为 peerDependencies，需由宿主项目安装。

使用

import { createApp } from 'vue'
import { ProLineChart } from '@hz_yujin/vue-charts'
import '@hz_yujin/vue-charts/style.css'

// 或全局注册
import VueCharts from '@hz_yujin/vue-charts'
app.use(VueCharts)

<script setup lang="ts">
import { ProLineChart } from '@hz_yujin/vue-charts'
</script>

<template>
  <ProLineChart
    title="近 7 日趋势"
    :categories="['周一', '周二', '周三']"
    :series="[{ name: '访问', data: [120, 200, 150], area: true }]"
    :height="360"
  />
</template>

ProChart（透传 option）

<ProChart :option="echartsOption" :height="320" />

全局默认

import { setChartDefaults } from '@hz_yujin/vue-charts'

setChartDefaults({ height: 400, autoresize: true })

开发

在 monorepo 根目录：

pnpm install
pnpm dev
pnpm build:charts