Chart 图表

经营概览数据报表：指标卡 RdStatCard、图表容器 RdChartCard（主包）与 Line / Combo / Area / Bar / Pie / Rank / Radar / Gauge / Funnel / Heatmap 等 ECharts 封装（@rd-element/ui/chart）。图表入口需安装 echarts、vue-echarts peer 依赖。

StatCard 指标卡

经营概览 / 列表 Hero 核心指标：数值、环比、迷你趋势；自带入场与数字滚动动效。

本月询价单

1,248单

环比上月 +12.3%

上月1,111

去年同期980

成交订单

328单

环比上月 +5.8%

平均响应时长

4.2小时

环比上月 -8.1%

客户流失率

2.4%

环比上月 +0.3%

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

<template>
  <div class="stat-card-grid">
    <RdStatCard
      label="本月询价单"
      value="1,248"
      unit="单"
      compare-label="环比上月"
      compare-value="+12.3%"
      trend="up"
      color="primary"
      :sparkline="[90,105,98,120,132,118,140,155,148,168,182,196]"
      :extra="[{ label: '上月', value: '1,111' }, { label: '去年同期', value: '980' }]"
      :enter-delay="0"
    />
    <RdStatCard
      label="成交订单"
      value="328"
      unit="单"
      compare-label="环比上月"
      compare-value="+5.8%"
      trend="up"
      color="success"
      :sparkline="[42,48,44,52,58,54,62,70,66,76,84,92]"
      :enter-delay="70"
    />
    <RdStatCard
      label="平均响应时长"
      value="4.2"
      unit="小时"
      compare-label="环比上月"
      compare-value="-8.1%"
      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="%"
      compare-label="环比上月"
      compare-value="+0.3%"
      trend="up"
      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>

ChartCard 图表卡片

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

询价 & 成交趋势

近 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>

Line 折线图

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

询价 & 成交趋势

近 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>

Combo 柱折混合

体量（柱）+ 比率/趋势（线）同屏，如 GMV 与转化率。

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 },
  { 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 },
]
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>

Area 堆叠面积

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

事业群收入构成

近 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>

Bar 柱状图

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

各事业群成交量

分组柱状

各事业群成交量（堆叠）

堆叠柱状

<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>

Pie 环形 / 饼图

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

成交占比

环形图 · 含中心文字

智能制造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>

Rank 排行条形

大区 / 客户 / 销售排行 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>

Radar 雷达图

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

经营能力雷达

本月 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>

Gauge 仪表盘

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

目标完成率

本月

<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>

Funnel 漏斗图

询价→报价→成交等阶段转化漏斗。

询价转化漏斗

曝光 → 下单全链路

阶段数量转化率

曝光量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" height="240px" />
    </RdChartCard>
  </div>
</template>

Heatmap 日历热力

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

询价活跃日历

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>

API

RdStatCard

属性名	说明	类型	默认值
label / value / unit	指标名与数值	string	—
compareLabel / compareValue / trend	环比对比与涨跌	string / StatCardTrend	'flat'
extra	附加指标行	{ label, value }[]	—
sparkline	迷你折线数据	number[]	—
color	强调色	StatCardColor	'default'
animate / enterDelay	动效与错峰入场（ms）	boolean / number	true / 0

RdChartCard

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

RdChartLine

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

RdChartCombo

属性名	说明	类型	默认值
categories / series	共享横轴与柱/线系列	string[] / ComboSeriesData[]	—
yAxisIndex	系列绑定 0=左轴 · 1=右轴	0 | 1	0
yFormatter / yFormatterRight	左/右 Y 轴格式化	(v: number) => string	—
yAxisLabelRight	右轴名称	string	—

RdChartArea

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

RdChartBar

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

RdChartPie

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

RdChartRank

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

RdChartRadar

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

RdChartGauge

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

RdChartFunnel

属性名	说明	类型	默认值
data	阶段名称与数量	FunnelItem[]	—
showRate	显示转化率	boolean	true
height	图表高度	string	'240px'

RdChartHeatmap

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