Chart 图表

经营概览数据报表：指标卡 RdStatCard、图表容器 RdChartCard（主包）与 RdChartLine / RdChartCombo / RdChartArea / RdChartBar / RdChartPie / RdChartRank / RdChartRadar / RdChartGauge / RdChartFunnel / RdChartHeatmap（@rd-element/ui/chart）。图表入口需安装 echarts、vue-echarts peer 依赖。

RdStatCard 指标卡

经营概览 / 列表 Hero 核心指标：数值、环比 / 同比、迷你趋势；可用 #right 放置 RdChartGauge 等扩展内容。

本月询价单

1,248单

环比 +12.3%

同比 +8.6%

上月1,111

去年同期980

成交订单

328单

环比 +5.8%

同比 -2.1%

平均响应时长

4.2小时

环比 -8.1%

同比 -12.4%

客户流失率

2.4%

环比 +0.3%

同比 +0.1%

<script setup lang="ts">
import { RdStatCard } from '@rd-element/ui'
import { RdChartGauge } from '@rd-element/ui/chart'
</script>

<template>
  <div class="stat-card-grid">
    <RdStatCard
      label="本月询价单"
      value="1,248"
      unit="单"
      mom-value="+12.3%"
      mom-trend="up"
      yoy-value="+8.6%"
      yoy-trend="up"
      color="primary"
      :extra="[{ label: '上月', value: '1,111' }, { label: '去年同期', value: '980' }]"
      :enter-delay="0"
      extra-layout="horizontal"
    >
      <template #right>
        <RdChartGauge
          :value="78"
          height="128px"
          label="78%"
          sublabel="目标达成"
          color="#EA543F"
        />
      </template>
    </RdStatCard>
    <RdStatCard
      label="成交订单"
      value="328"
      unit="单"
      mom-value="+5.8%"
      mom-trend="up"
      yoy-value="-2.1%"
      yoy-trend="down"
      color="success"
      :sparkline="[42,48,44,52,58,54,62,70,66,76,84,92]"
      :enter-delay="70"
    />
    <RdStatCard
      label="平均响应时长"
      value="4.2"
      unit="小时"
      mom-value="-8.1%"
      mom-trend="down"
      yoy-value="-12.4%"
      yoy-trend="down"
      color="warning"
      :sparkline="[8.5,7.8,8.2,7.2,6.8,7.0,6.2,5.8,6.0,5.4,4.8,4.2]"
      :enter-delay="140"
    />
    <RdStatCard
      label="客户流失率"
      value="2.4"
      unit="%"
      mom-value="+0.3%"
      mom-trend="up"
      yoy-value="+0.1%"
      yoy-trend="flat"
      color="error"
      :sparkline="[1.8,2.0,1.9,2.1,2.3,2.0,1.8,2.2,2.4,2.1,2.3,2.4]"
      :enter-delay="210"
    />
  </div>
</template>

Attributes

属性名	说明	类型	默认值
label / value / unit	指标名与数值	string	—
momLabel / momValue / momTrend	环比文案、数值与涨跌	string / StatCardTrend	'环比' / — / 'flat'
yoyLabel / yoyValue / yoyTrend	同比文案、数值与涨跌	string / StatCardTrend	'同比' / — / 'flat'
compareLabel / compareValue / trend	单条对比（兼容旧用法；有 mom/yoy 时忽略）	string / StatCardTrend	'flat'
extra	附加指标行	{ label, value }[]	—
extraLayout	extra 布局：vertical 上下 / horizontal 左右	'vertical' | 'horizontal'	'vertical'
sparkline	迷你折线数据	number[]	—
color	强调色	StatCardColor	'default'
animate / enterDelay	动效与错峰入场（ms）	boolean / number	true / 0

Slots

插槽名	说明
icon	标题右侧图标
trend	覆盖默认环比/同比区
right	卡片右侧扩展区（如 RdChartGauge）
default	主内容区底部追加

RdChartCard 图表卡片

图表外层统一标题、副标题与操作区；承载各 RdChart* 与空/错态。

询价 & 成交趋势

近 12 个月

实时

<script setup lang="ts">
import { ref } from 'vue'
import { RdChartCard, toast } from '@rd-element/ui'
import { RdChartLine } from '@rd-element/ui/chart'

const empty = ref(false)
const error = ref(false)
const categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const series = [
  { name: '询价单', data: [120, 145, 138, 162, 180, 175, 210, 198, 224, 215, 248, 260], area: true },
  { name: '成交订单', data: [45, 60, 55, 72, 80, 78, 95, 88, 102, 98, 115, 128], color: '#3B82F6' },
]
</script>

<template>
  <div class="demo-row" style="gap:10px;margin-bottom:12px">
    <el-button size="small" :type="empty ? 'primary' : undefined" @click="empty = !empty">演示空态</el-button>
    <el-button size="small" :type="error ? 'danger' : undefined" @click="error = !error">演示错误态</el-button>
  </div>
  <RdChartCard title="询价 & 成交趋势" subtitle="近 12 个月">
    <template #actions><el-tag type="success" size="small">实时</el-tag></template>
    <RdChartLine
      :categories="categories"
      :series="series"
      height="240px"
      :empty="empty"
      :error="error"
      @retry="() => { error = false; toast.success('已重试', '演示') }"
    />
  </RdChartCard>
</template>

Attributes

属性名	说明	类型	默认值
title / subtitle	卡片标题区	string	''
plain	无边框紧凑嵌套态	boolean	false
#actions / #default	操作区与图表内容	slot	—

RdChartLine 折线图

趋势指标：询价量、成交额随时间变化。

询价 & 成交趋势

近 12 个月

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartLine } from '@rd-element/ui/chart'

const categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const series = [
  { name: '询价单', data: [120, 145, 138, 162, 180, 175, 210, 198, 224, 215, 248, 260], area: true },
  { name: '成交订单', data: [45, 60, 55, 72, 80, 78, 95, 88, 102, 98, 115, 128], color: '#3B82F6' },
]
</script>

<template>
  <RdChartCard title="询价 & 成交趋势" subtitle="近 12 个月">
    <RdChartLine :categories="categories" :series="series" height="260px" />
  </RdChartCard>
</template>

Attributes

属性名	说明	类型	默认值
categories / series	横轴类目与多系列	string[] / LineSeriesData[]	—
height / smooth / legend	高度、平滑曲线、图例	string / boolean	'280px' / true / true
empty / error	空态与错误态	boolean	false
yFormatter	Y 轴数值格式化	(v: number) => string	—
@retry	错误态重试	event	—

RdChartCombo 柱折混合

体量（柱）+ 比率/趋势（线）同屏，如 GMV 与转化率。可用 unit / series[].unit 配置单位（showUnit 控制显隐）；tooltip 会带单位，未传 yFormatter 时轴刻度也会追加单位。

GMV & 转化率

近 12 个月 · 双轴

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartCombo } from '@rd-element/ui/chart'

const categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const series = [
  { name: '成交 GMV', type: 'bar', data: [180, 210, 192, 240, 268, 248, 285, 310, 290, 340, 368, 392], yAxisIndex: 0, unit: '万' },
  { name: '询价转化率', type: 'line', data: [23, 24.5, 23.8, 25.2, 25.8, 25.4, 26, 26.8, 26.2, 27, 26.6, 26.3], yAxisIndex: 1, unit: '%' },
]
const formatYen = (v: number) => `¥${v}K`
const formatPct = (v: number) => `${v}%`
</script>

<template>
  <RdChartCard title="GMV & 转化率" subtitle="近 12 个月 · 双轴">
    <RdChartCombo
      :categories="categories"
      :series="series"
      height="260px"
      :y-formatter="formatYen"
      :y-formatter-right="formatPct"
      y-axis-label-right="转化率"
    />
  </RdChartCard>
</template>

Attributes

属性名	说明	类型	默认值
categories / series	共享横轴与柱/线系列	string[] / ComboSeriesData[]	—
yAxisIndex	系列绑定 0=左轴 · 1=右轴	0 | 1	0
unit	全图默认单位（系列未指定时）	string	''
showUnit	是否展示单位	boolean	true
series[].unit	单系列单位（覆盖全图 unit）	string	—
yFormatter / yFormatterRight	左/右 Y 轴格式化（传入时轴上不再追加 unit）	(v: number) => string	—
yAxisLabelRight	右轴名称	string	—

RdChartArea 堆叠面积

多系列占比随时间变化，看总量与结构。

事业群收入构成

近 12 个月

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartArea } from '@rd-element/ui/chart'

const categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const series = [
  { name: '智能制造', data: [42, 48, 52, 58, 62, 70, 78, 74, 82, 88, 94, 102] },
  { name: '平台服务', data: [28, 32, 36, 40, 44, 48, 54, 52, 58, 62, 68, 74] },
  { name: '新能源', data: [18, 20, 22, 26, 28, 32, 36, 34, 40, 44, 48, 52] },
]
</script>

<template>
  <RdChartCard title="事业群收入构成" subtitle="近 12 个月">
    <RdChartArea :categories="categories" :series="series" height="260px" />
  </RdChartCard>
</template>

Attributes

属性名	说明	类型	默认值
categories / series	类目与堆叠系列	string[] / AreaSeriesData[]	—
stack	堆叠面积	boolean	true
height / smooth	高度与平滑	string / boolean	'280px' / true

RdChartBar 柱状图

分类对比：大区业绩、产品线订单量；可堆叠或水平。

各事业群成交量

分组柱状

各事业群成交量（堆叠）

堆叠柱状

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartBar } from '@rd-element/ui/chart'

const categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const series = [
  { name: '智能制造事业群', data: [42, 55, 48, 63, 70, 68, 82, 75, 90, 88, 101, 112] },
  { name: '平台服务事业群', data: [28, 35, 32, 40, 48, 45, 54, 50, 60, 58, 72, 80] },
]
</script>

<template>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
    <RdChartCard title="各事业群成交量" subtitle="分组柱状">
      <RdChartBar :categories="categories" :series="series" height="240px" />
    </RdChartCard>
    <RdChartCard title="各事业群成交量（堆叠）" subtitle="堆叠柱状">
      <RdChartBar :categories="categories" :series="series" :stack="true" height="240px" />
    </RdChartCard>
  </div>
</template>

Attributes

属性名	说明	类型	默认值
categories / series	类目与系列	string[] / BarSeriesData[]	—
stack / horizontal	堆叠、水平条	boolean	false
height	图表高度	string	'280px'

RdChartPie 环形 / 饼图

结构占比：客户等级、来源渠道分布。

成交占比

环形图 · 含中心文字

智能制造42.0% 42

平台服务28.0% 28

新能源18.0% 18

消费品12.0% 12

成交占比

实心饼图

智能制造42.0% 42

平台服务28.0% 28

新能源18.0% 18

消费品12.0% 12

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartPie } from '@rd-element/ui/chart'

const data = [
  { name: '智能制造', value: 42 },
  { name: '平台服务', value: 28 },
  { name: '新能源', value: 18 },
  { name: '消费品', value: 12 },
]
</script>

<template>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
    <RdChartCard title="成交占比" subtitle="环形图 · 含中心文字">
      <RdChartPie :data="data" center-label="成交总量" center-value="328" height="200px" />
    </RdChartCard>
    <RdChartCard title="成交占比" subtitle="实心饼图">
      <RdChartPie :data="data" inner-radius="0" height="200px" />
    </RdChartCard>
  </div>
</template>

Attributes

属性名	说明	类型	默认值
data	扇区 name / value	PieItem[]	—
innerRadius	内半径（0 为实心饼）	string	'60%'
centerLabel / centerValue	环形中心文案	string	—

RdChartRank 排行条形

大区 / 客户 / 销售排行 Top N。

大区业绩排行

按成交单量

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartRank } from '@rd-element/ui/chart'

const data = [
  { name: '华东大区', value: 428 },
  { name: '华南大区', value: 386 },
  { name: '华北大区', value: 312 },
  { name: '西南大区', value: 248 },
  { name: '华中大区', value: 196 },
]
const formatRank = (v: number) => `${v} 单`
</script>

<template>
  <div style="max-width:520px">
    <RdChartCard title="大区业绩排行" subtitle="按成交单量">
      <RdChartRank :data="data" height="240px" :value-formatter="formatRank" />
    </RdChartCard>
  </div>
</template>

Attributes

属性名	说明	类型	默认值
data	名称 + 数值排行	RankItem[]	—
valueFormatter	数值格式化	(v: number) => string	—
highlightTop	高亮前 N 名	number	3

RdChartRadar 雷达图

多维能力 / 评分对比，可叠基线或竞品。

经营能力雷达

本月 vs 行业基线

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartRadar } from '@rd-element/ui/chart'

const indicators = [
  { name: '响应速度', max: 100 },
  { name: '报价质量', max: 100 },
  { name: '成单转化', max: 100 },
  { name: '回款效率', max: 100 },
  { name: '客户满意', max: 100 },
  { name: '复购粘性', max: 100 },
]
const series = [
  { name: '本月表现', value: [86, 78, 72, 81, 88, 74] },
  { name: '行业基线', value: [70, 72, 68, 65, 75, 60] },
]
</script>

<template>
  <div style="max-width:480px">
    <RdChartCard title="经营能力雷达" subtitle="本月 vs 行业基线">
      <RdChartRadar :indicators="indicators" :series="series" height="280px" />
    </RdChartCard>
  </div>
</template>

Attributes

属性名	说明	类型	默认值
indicators	维度轴	RadarIndicator[]	—
series	多系列分值	RadarSeriesData[]	—
height	图表高度	string	'280px'

RdChartGauge 仪表盘

目标完成率、产能利用率、回款进度等单一比率。

目标完成率

本月

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartGauge } from '@rd-element/ui/chart'
</script>

<template>
  <div style="max-width:360px">
    <RdChartCard title="目标完成率" subtitle="本月">
      <RdChartGauge :value="84" sublabel="相对期初目标" height="200px" />
    </RdChartCard>
  </div>
</template>

Attributes

属性名	说明	类型	默认值
value / max	当前值与上限	number	— / 100
label / sublabel	中心主/副文案	string	—
height	图表高度	string	'200px'

RdChartFunnel 漏斗图

询价→报价→成交等阶段转化漏斗。图形内名称 / 数量 / 转化率可分别开关；底部列表用 showTable 单独控制。unit 用于数量单位（图形 / tooltip / 列表），showUnit 控制是否展示。

询价转化漏斗

曝光 → 下单全链路

阶段数量转化率

曝光量12,000 次 100%

点击访问6,800 次 56.7%

询价提交2,400 次 20.0%

报价回复1,560 次 13.0%

成交下单640 次 5.3%

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartFunnel } from '@rd-element/ui/chart'

const data = [
  { name: '曝光量', value: 12000 },
  { name: '点击访问', value: 6800 },
  { name: '询价提交', value: 2400 },
  { name: '报价回复', value: 1560 },
  { name: '成交下单', value: 640 },
]
</script>

<template>
  <div style="max-width:520px">
    <RdChartCard title="询价转化漏斗" subtitle="曝光 → 下单全链路">
      <RdChartFunnel :data="data" unit="次" height="240px" />
    </RdChartCard>
  </div>
</template>

Attributes

属性名	说明	类型	默认值
data	阶段名称与数量	FunnelItem[]	—
showName	图形内显示阶段名称	boolean	true
showValue	图形内显示数量	boolean	true
showRate	图形内显示转化率	boolean	true
showTable	是否展示底部阶段列表	boolean	true
unit	数量单位（tooltip / 图形 / 列表）	string	''
showUnit	是否展示单位	boolean	true
height	图表高度	string	'240px'

RdChartHeatmap 日历热力

日历热力：日活、询价密度，看忙闲规律。

询价活跃日历

2026 年 7 月

<script setup lang="ts">
import { RdChartCard } from '@rd-element/ui'
import { RdChartHeatmap } from '@rd-element/ui/chart'

const data = Array.from({ length: 31 }, (_, i) => {
  const d = i + 1
  return [`2026-07-${String(d).padStart(2, '0')}`, Math.round(12 + Math.sin(d * 0.6) * 16 + (d % 4) * 5)]
})
</script>

<template>
  <RdChartCard title="询价活跃日历" subtitle="2026 年 7 月">
    <RdChartHeatmap :data="data" month="2026-07" height="200px" />
  </RdChartCard>
</template>

Attributes

属性名	说明	类型	默认值
data	日期 + 强度 [YYYY-MM-DD, number]	HeatmapDatum[]	—
month	展示年月	string	data 首条月份
max / color	visualMap 上限与主色	number / string	auto