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