Chart 图表

使用 ApexCharts 集成的数据可视化。

安装

此组件需要 apexcharts 作为依赖项：

npm install apexcharts

npm install apexcharts

引入

import { Chart } from 'asterui/chart'

import { Chart } from 'asterui/chart'

示例

折线图

用于时间序列数据的简单折线图。

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="line"
        height={300}
        series={[
          {
            name: 'Sales',
            data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
          },
        }}
      />
    )
}

export default App

多线图

比较多个数据系列。

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="line"
        height={300}
        series={[
          {
            name: 'Revenue',
            data: [30, 40, 45, 50, 49, 60, 70, 91],
          },
          {
            name: 'Expenses',
            data: [20, 35, 40, 35, 40, 55, 60, 75],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
          },
          stroke: {
            curve: 'smooth',
          },
        }}
      />
    )
}

export default App

柱状图

分类数据可视化。

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="bar"
        height={300}
        series={[
          {
            name: 'Sales',
            data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
          },
          plotOptions: {
            bar: {
              borderRadius: 4,
            },
          },
        }}
      />
    )
}

export default App

堆叠柱状图

显示值的组成。

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="bar"
        height={300}
        series={[
          { name: 'Product A', data: [44, 55, 41, 67, 22, 43] },
          { name: 'Product B', data: [13, 23, 20, 8, 13, 27] },
          { name: 'Product C', data: [11, 17, 15, 15, 21, 14] },
        ]}
        options={{
          chart: { stacked: true },
          xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'] },
        }}
      />
    )
}

export default App

饼图

显示整体的比例。

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="pie"
        height={350}
        series={[44, 55, 13, 43, 22]}
        options={{
          labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
          legend: {
            position: 'bottom',
          },
        }}
      />
    )
}

export default App

环形图

中心镂空的饼图，用于显示总计。

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="donut"
        height={350}
        series={[44, 55, 41, 17, 15]}
        options={{
          labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'Grapes'],
          legend: {
            position: 'bottom',
          },
          plotOptions: {
            pie: {
              donut: {
                labels: {
                  show: true,
                  total: {
                    show: true,
                    label: 'Total',
                  },
                },
              },
            },
          },
        }}
      />
    )
}

export default App

面积图

带填充区域的折线图。

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="area"
        height={300}
        series={[
          {
            name: 'Series 1',
            data: [31, 40, 28, 51, 42, 109, 100],
          },
          {
            name: 'Series 2',
            data: [11, 32, 45, 32, 34, 52, 41],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          stroke: {
            curve: 'smooth',
          },
          fill: {
            type: 'gradient',
            gradient: {
              opacityFrom: 0.6,
              opacityTo: 0.1,
            },
          },
        }}
      />
    )
}

export default App

雷达图

多轴比较图表。

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="radar"
        height={350}
        series={[
          {
            name: 'Series 1',
            data: [80, 50, 30, 40, 100, 20],
          },
          {
            name: 'Series 2',
            data: [20, 30, 40, 80, 20, 80],
          },
        ]}
        options={{
          xaxis: {
            categories: ['Speed', 'Power', 'Agility', 'Endurance', 'Accuracy', 'Stealth'],
          },
        }}
      />
    )
}

export default App

径向柱状图

圆形进度指示器。

</>

import { Chart } from 'asterui/chart'

function App() {
  return (
      <Chart
        type="radialBar"
        height={350}
        series={[76, 67, 61, 90]}
        options={{
          labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
          plotOptions: {
            radialBar: {
              dataLabels: {
                total: {
                  show: true,
                  label: 'Total',
                },
              },
            },
          },
        }}
      />
    )
}

export default App

API

Chart

属性	描述	类型	默认值
type	图表类型	'line' | 'bar' | 'pie' | 'donut' | 'area' | 'radar' | 'radialBar'	'line'
series	数据系列	ApexAxisChartSeries | ApexNonAxisChartSeries	[]
options	ApexCharts 选项	ApexOptions	{}
height	图表高度	number | string	350
width	图表宽度	number | string	'100%'
data-testid	用于测试的测试 ID	string	-
className	额外的 CSS 类名	string	-

无障碍访问

• 图表包含数据点的 ARIA 标签
• 图例项可通过键盘导航
• 工具提示在悬停/聚焦时提供详细数据
• 选择的颜色具有足够的对比度