@alicd/crui-chart

---

category: Components
type: UI Views
component: Base
chinese: 卡片图表组件
english: Chart

基于 echarts v3.8.5 封装的组件列表，使用时无需在应用中引入 echarts 图表库，主要包含：卡片、折线、柱状、饼状、雷达、漏斗图、迷你折线、迷你柱状、进度条及趋势图，同时支持配置 option 自定义图表，无缝对接 echarts。

API

Chart.Card

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
title	标题	ReactNode 或 string	-
action	自定义操作区	ReactNode	-
contentHeight	内容区域高度	number 或 string	auto
text	主内容	ReactNode 或 string	-
subText	辅内容	ReactNode 或 string	-
footer	底部	ReactNode 或 string	-

Chart.Line

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
type	图形展示类型	string	basic（默认值）, area（区域图）, marker（峰值峰谷图）
color	设置系列颜色	Array	["#59acff", "#43d3e0", "#45e6b0", "#8ee065", "#face4b", "#ffb366", "#ff8066", "#ff6680", "#e667d0", "#aa61f2", "#7961f2", "#667fff", "#f7d83e", "#ffbf40", "#ff884d"]
title	标题	string	-
subTitle	子标题	string	-
titleX	标题位置	string	left（默认值）、center、right
width	绘图区域宽度	number 或 string	100%
height	绘图区域高度	number 或 string	500px
padding	坐标轴上、下、左、右留白	Object<{top, bottom, left, right}>，top、bottom、left、right 为 number 或 string	-
orient	图例列表布局方向	string	horizontal（默认值）、vertical
legendX	图例横向位置	string	center（默认值）、left、right
legendY	图例纵向位置	string 或 number	auto
hasLegend	图例是否显示	boolean	true
hasToolbox	工具栏是否显示	boolean	true
hasTooltip	tooltip 是否显示	boolean	true
hasX	X 轴是否显示	boolean	true
hasY	Y 轴是否显示	boolean	true
hasGridV	栅格垂直线是否显示	boolean	true
hasGridH	栅格水平线是否显示	boolean	true
animation	是否动画展示	boolean	true
repaint	组件 props 改变时是否重新渲染	boolean	false
boundaryGap	坐标轴两边留白	boolean	false
onReady	图形绘制完成回调并返回实例	function<(chart)>	-
data	数据	Object<{x, data: [{name, data, type}]}>，x 为横坐标，data 为纵坐标数据	如：{x: ['一','二'],data: [{name: '邮件营销',data: [120, 132]}, {name: '联盟广告',data: [220, 182]}]}

Chart.Bar

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
type	图形展示类型	string	basic（默认值），inverse（坐标反转图）， stack（堆叠），inversestack（坐标反转堆叠图）
color	设置系列颜色	Array	["#59acff", "#43d3e0", "#45e6b0", "#8ee065", "#face4b", "#ffb366", "#ff8066", "#ff6680", "#e667d0", "#aa61f2", "#7961f2", "#667fff", "#f7d83e", "#ffbf40", "#ff884d"]
title	标题	string	-
subTitle	子标题	string	-
titleX	标题位置	string	left（默认值）、center、right
width	绘图区域宽度	number 或 string	100%
height	绘图区域高度	number 或 string	500px
padding	坐标轴上、下、左、右留白	Object<{top, bottom, left, right}>，top、bottom、left、right 为 number 或 string	-
orient	图例列表布局方向	string	horizontal（默认值）、vertical
legendX	图例横向位置	string	center（默认值）、left、right
legendY	图例纵向位置	string 或 number	auto
hasLegend	图例是否显示	boolean	true
hasToolbox	工具栏是否显示	boolean	true
hasTooltip	tooltip 是否显示	boolean	true
hasX	X 轴是否显示	boolean	true
hasY	Y 轴是否显示	boolean	true
hasGridV	栅格垂直线是否显示	boolean	true
hasGridH	栅格水平线是否显示	boolean	true
animation	是否动画展示	boolean	true
repaint	组件 props 改变时是否重新渲染	boolean	false
onReady	图形绘制完成回调并返回实例	function<(chart)>	-
data	数据	Object<{x, data: [{name, data, type}]}>，x 为横坐标，data 为纵坐标数据	参照 Chart.Line

Chart.Pie

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
type	图形展示类型	string	basic（默认值）， ring（环形）
color	设置系列颜色	Array	["#59acff", "#43d3e0", "#45e6b0", "#8ee065", "#face4b", "#ffb366", "#ff8066", "#ff6680", "#e667d0", "#aa61f2", "#7961f2", "#667fff", "#f7d83e", "#ffbf40", "#ff884d"]
title	标题	string	-
subTitle	子标题	string	-
titleX	标题位置	string	left、center（默认值）、right
width	绘图区域宽度	number 或 string	100%
height	绘图区域高度	number 或 string	500px
orient	图例列表布局方向	string	horizontal、vertical（默认值）
legendX	图例横向位置	string	left（默认值）、center、right
legendY	图例纵向位置	string 或 number	auto
hasLegend	图例是否显示	boolean	true
hasToolbox	工具栏是否显示	boolean	true
hasTooltip	tooltip 是否显示	boolean	true
animation	是否动画展示	boolean	true
repaint	组件 props 改变时是否重新渲染	boolean	false
radius	图形半径，数据第一项为内半径，第二项为外半径	string 或 Array	55%、['50%', '70%']
center	图形圆心，数据第一项为横坐标，第二项为纵坐标	Array	['50%', '50%']
roseType	区分数据大小模式	string 或 boolean	false（默认值）、radius、area
labelSize	中心数据大小	number	30
onReady	图形绘制完成回调并返回实例	function<(chart)>	-
data	数据	Array<{name, data: [{value, name}]}> 或 Object{name, data: [{value, name}]}	如：[{name:'饼状图', data: [{value, name},{value, name}]}]

Chart.Radar

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
type	图形展示类型	string	basic（默认值）， area（区域图）
color	设置系列颜色	Array	["#59acff", "#43d3e0", "#45e6b0", "#8ee065", "#face4b", "#ffb366", "#ff8066", "#ff6680", "#e667d0", "#aa61f2", "#7961f2", "#667fff", "#f7d83e", "#ffbf40", "#ff884d"]
title	标题	string	-
subTitle	子标题	string	-
titleX	标题位置	string	left（默认值）、center、right
width	绘图区域宽度	number 或 string	100%
height	绘图区域高度	number 或 string	500px
orient	图例列表布局方向	string	horizontal（默认值）、vertical
legendX	图例横向位置	string	center（默认值）、left、right
legendY	图例纵向位置	string 或 number	auto
hasLegend	图例是否显示	boolean	true
hasToolbox	工具栏是否显示	boolean	true
hasTooltip	tooltip 是否显示	boolean	true
animation	是否动画展示	boolean	true
repaint	组件 props 改变时是否重新渲染	boolean	false
radius	图心半径	string	60%
center	图形圆心，数据第一项为横坐标，第二项为纵坐标	Array	['50%', '50%']
onReady	图形绘制完成回调并返回实例	function<(chart)>	-
data	数据，max 为 number 或 array，number 必须大于 value 最大值，array 必须大于下标对应 value 最大值	Object<{max, data: [{name, data<[{name, value}]>}]}>	-

Chart.Funnel

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
color	设置系列颜色	Array	["#59acff", "#43d3e0", "#45e6b0", "#8ee065", "#face4b", "#ffb366", "#ff8066", "#ff6680", "#e667d0", "#aa61f2", "#7961f2", "#667fff", "#f7d83e", "#ffbf40", "#ff884d"]
title	标题	string	-
subTitle	子标题	string	-
titleX	标题位置	string	left（默认值）、center、right
width	绘图区域宽度	number 或 string	100%
height	绘图区域高度	number 或 string	500px
min	最小值	number	0
max	最大值	number	100
funnelAlign	对齐方向	string	center（默认值）、left、right
padding	坐标轴上、下留白	Object<{top, bottom}>，top、bottom 为 number 或 string	-
orient	图例列表布局方向	string	horizontal（默认值）、vertical
legendX	图例位置	string	center（默认值）、left、right
legendY	图例纵向位置	string 或 number	auto
hasLegend	图例是否显示	boolean	true
hasToolbox	工具栏是否显示	boolean	true
hasTooltip	tooltip 是否显示	boolean	true
animation	是否动画展示	boolean	true
repaint	组件 props 改变时是否重新渲染	boolean	false
onReady	图形绘制完成回调并返回实例	function<(chart)>	-
data	数据	Array<{name, data: [{value, name}]}> 或 Object{name, data: [{value, name}]}	-

Chart.MiniLine

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
type	类型	string	basic（默认值），area（区域图）
color	线条颜色	Array	-
lineWidth	线条宽度	number	2
width	容器宽度	number 或 string	100%
height	容器高度	number 或 string	-
hasTooltip	tooltip 是否显示	boolean	true
animation	是否动画展示	boolean	true
symbol	标记图形	string	circle（默认值）、none（无）、emptyCircle（空心）、rect（矩形）、roundRect（圆角矩形）、triangle（三角形）、diamond（菱形）、pin（热气球）、arrow（箭头）
symbolSize	标记图形大小	number 或 Array<宽, 高>	10
repaint	组件 props 改变时是否重新渲染	boolean	false
onReady	图形绘制完成回调并返回实例	function<(chart)>	-
data	数据	Array<{x, y}>	如：[{x, y}]

Chart.MiniBar

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
color	柱子背景色	Array	-
width	容器宽度	number 或 string	100%
height	容器高度	number 或 string	-
hasTooltip	tooltip 是否显示	boolean	true
animation	是否动画展示	boolean	true
repaint	组件 props 改变时是否重新渲染	boolean	false
onReady	图形绘制完成回调并返回实例	function<(chart)>	-
data	数据	Array<{x, y}>	如：[{x, y}]

Chart.Trend

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
type	图标方向	string	up（默认值，向上），down（向下）
status	状态	string	good（默认值）、bad
text	内容	ReactNode 或 string	-
direction	图标在内容区域左或右边	string	r (默认值，右边)，l（左边）
iconSize	图标大小,可选值：'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'	string	xxs
iconColor	图表颜色	string	#FF341A

Chart.Define

成员	说明	类型	默认值
className	自定义样式	string	-
style	自定义内联样式	Object	-
repaint	组件 props 改变时是否重新渲染	boolean	false
width	绘图区域宽度	number 或 string	100%
height	绘图区域高度	number 或 string	500px
onReady	图形绘制完成回调并返回实例	function<(chart)>	-
options	图表配置	object	-