nuxt-charts
vue-chrts 的 Nuxt 模块
功能
- 📊 在您的 Nuxt 应用程序中使用精美的图表组件
- 🔄 自动导入所有图表组件
- 📊 多种类型：折线图、柱状图、面积图、圆环图
- 🎨 易于定制
- 💡 简单、直观的 API
- 🚀 使用 Vue 3 和 TypeScript 构建
安装
# npm
npm install nuxt-charts
# yarn
yarn add nuxt-charts
# pnpm
pnpm add nuxt-charts
使用
将模块添加到您的 Nuxt 配置中
// nuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-charts"]
});
然后在您的 Nuxt 应用程序中使用这些组件
<template>
<div class="chart-wrapper">
<LineChart
:data="data"
:categories="categories"
:height="300"
:xFormatter="xFormatter"
xLabel="Month"
yLabel="Amount"
/>
</div>
</template>
<script setup>
import { LineChart } from 'vue-chrts';
const data = [
{ month: 'Jan', sales: 100, profit: 50 },
{ month: 'Feb', sales: 120, profit: 55 },
{ month: 'Mar', sales: 180, profit: 80 },
{ month: 'Apr', sales: 110, profit: 40 },
{ month: 'May', sales: 90, profit: 30 },
];
const categories = {
sales: {
name: 'Sales',
color: '#3b82f6'
},
profit: {
name: 'Profit',
color: '#10b981'
}
};
const xFormatter = (i) => data[i].month;
</script>
可用组件
AreaChart- 面积图AreaStackedChart- 堆叠面积图LineChart- 折线图BarChart- 柱状图DonutChart- 圆环图
自动导入类型
以下类型是自动导入的
LegendPosition（图例位置）CurveType（曲线类型）Orientation（方向）BulletLegendItemInterface（项目符号图例项接口）
许可证
MIT