@ classic-homes/ 图表- svelte

经典主题设计系统的斯维尔特ECharts组件. 图表取出经典的光和暗的主题 @classic-homes/charts-core。 。 。 .

安装

npm install @classic-homes/charts-svelte echarts svelte

同伴依赖性 : echarts@^5.5.0, (中文(简体) ), svelte@^5.20.0。 。 。 .

快速启动

<script lang="ts">
  import { LineChart } from '@classic-homes/charts-svelte';

  const data = {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [
      { name: '2024', data: [120, 132, 101, 134, 90, 230] },
      { name: '2025', data: [220, 182, 191, 234, 290, 330] },
    ],
  };
</script>

<LineChart title="Monthly Revenue" {data} smooth height={400} />

出口

• 图表数字 : LineChart, (中文(简体) ), BarChart, (中文(简体) ), PieChart, (中文(简体) ), AreaChart, (中文(简体) ), ScatterChart, (中文(简体) ), DonutChart, (中文(简体) ), RadarChart, (中文(简体) ), FunnelChart, (中文(简体) ), GaugeChart, (中文(简体) ), HeatmapChart, (中文(简体) ), TreemapChart, (中文(简体) ), CandlestickChart, (中文(简体) ), SankeyChart, (中文(简体) ), ComboChart, (中文(简体) ), DotPlotChart, (中文(简体) ), BulletChart, (中文(简体) ), HistogramChart, (中文(简体) ), BoxPlotChart, (中文(简体) ), WaterfallChart
• 站点助手数字 : Sparkline, (中文(简体) ), StatCard, (中文(简体) ), StatGroup
• 基本构成部分数字 : ChartContainer, (中文(简体) ), ChartSkeleton, (中文(简体) ), ChartError, (中文(简体) ), ChartEmpty, (中文(简体) ), ChartLegend, (中文(简体) ), ChartDataTable
• 可编曲数字 : useChart, (中文(简体) ), useChartTheme, (中文(简体) ), useChartResize, (中文(简体) ), useChartLegend, (中文(简体) ), useReducedMotion, (中文(简体) ), registerClassicThemes, (中文(简体) ), registerEchartsModules, (中文(简体) ), exportChartImage
• 数据助手 (从) @classic-homes/charts-core: fromRecords, (中文(简体) ), toSliceData, (中文(简体) ), binValues, (中文(简体) ), boxplotStats, (中文(简体) ), waterfallLayout, (中文(简体) ), formatValue, (中文(简体) ), computeDelta, (中文(简体) ), tableToCsv, (中文(简体) ), downloadCsv

图表数据和选项类型从软件包根导出,也从 @classic-homes/charts-core/types。 。 。 .

<script lang="ts">
  import { ChartSkeleton, DonutChart, type PieSliceData } from '@classic-homes/charts-svelte';
</script>

相关软件包

• @classic-homes/charts-core主题、类型和公用事业
• @classic-homes/charts-react: 核心和扩展图的对应物