图表 ​

@dou-ui/chart 用于绘制折线图、柱状图、饼图等统计图表。一个图表由外壳 DouChart 和写在里面的系列、坐标轴组成。

完整的页面示例见区块经营看板、实时监控和门店对比。

安装 ​

图表是单独的包，需要和 dou-ui 一起安装：

bun add dou-ui @dou-ui/chart

引入样式，再注册用到的组件：

import 'dou-ui/style.css'
import '@dou-ui/chart/style.css'
import { DouChart, DouChartAxis, DouChartBar, DouChartLine } from '@dou-ui/chart'

app.use(DouChart).use(DouChartAxis).use(DouChartLine).use(DouChartBar)

基础用法 ​

data 是一组行数据，x 指定横轴使用哪个字段。系列组件用 y 指定纵轴的字段，name 设置系列名称。

• 宽度跟随容器，height 设置高度，默认 320px。
• 没有写坐标轴时，自动显示底部的横轴和左侧的纵轴。
• 只有一个系列时使用中性色。

系列画在 canvas 上，刻度文字、图例等是页面中的普通文字，跟随主题的字体和颜色。

多个系列 ​

多个系列按书写顺序依次使用色板中的颜色，图表下方自动显示图例。

• color 指定任意 CSS 颜色；颜色有明确含义时（比如错误数），用 tone 取语气色。
• :legend="false" 隐藏图例；只有一个系列时，legend 可以显示图例。

图例的用法见提示框与图例，配色见外观。

组合图 ​

不同类型的系列可以放在同一个图表里，比如柱状图配合折线图，再用第二条数值轴显示另一种单位。

第二条数值轴的用法见坐标轴。饼图、雷达图、漏斗图、矩形树图、旭日图和仪表盘需要单独放在一个图表里。

图表类型 ​

• 折线图、面积图：DouChartLine、DouChartArea
• 柱状图、瀑布图：DouChartBar、DouChartWaterfall
• 直方图、箱线图：DouChartHistogram、DouChartBoxplot
• 散点图、气泡图、热力图：DouChartScatter、DouChartHeatmap
• 饼图、环形图、玫瑰图：DouChartPie
• 矩形树图、旭日图：DouChartTreemap、DouChartSunburst
• 雷达图、漏斗图、仪表盘：DouChartRadar、DouChartFunnel、DouChartGauge

内置系列不够用时，可以用 defineChartSeries 定义自己的系列，见自定义系列。

只想在表格、卡片或文字旁边显示一段走势，不需要坐标轴和交互时，用基础组件 Sparkline 迷你图；按天显示一年里的数值，用 CalendarHeatmap 日历热力图。这两个组件在 dou-ui 里，不需要安装图表包。

没有数据 ​

所有系列都没有数值时，图表不画坐标轴，只在中间显示“没有数据”。empty 插槽可以替换这部分内容。

加载中 ​

loading 为 true 时，图表变淡，中间显示加载图标，这时没有数据也不会显示“没有数据”。数据到达后把 loading 设回 false，已有的图表会过渡到新数据。

动画 ​

图表第一次出现在屏幕上时有入场动画：柱子和面积从基线长出，折线从左到右画出，饼图沿顺时针展开。数据变化时，各个值移动到新的位置。

开启了减弱动效，或者数据点超过 2000 个时，图表直接显示最终的样子。

语言 ​

图表里的文字（“没有数据”、读屏读出的概要、数据表的表头等）跟随 ConfigProvider 的语言，内置简体中文、繁体中文和英文。

messages 可以改写其中几条：

<DouChart :data="rows" :messages="{ empty: '本月还没有订单' }" />

• chartLocales 是内置的三份文案，按语言名称（如 'zh-CN'）索引。要支持其他语言时，往里面加一份完整的 ChartMessages。
• useChartMessages(override?) 返回当前语言的文案，自定义系列或提示框里需要相同的文字时使用。

API ​

Chart Props ​

Chart Events ​

Chart Slots ​

Chart Exposes ​