nuke-biz-qn-chart
Version:
weex 版本千牛业务图表库，基于weex + rax,包含线图、柱状图、饼图、雷达图等，其他类型的图表正在按业务需求陆续接入。其中 native 端由客户端插件实现，h5 端使用 g2-mobile
240 lines (213 loc) • 16.4 kB
Markdown
# nuke-biz-qn-chart
---
## 设计思路
weex 版本千牛业务图表库，基于 weex + rax,包含线图、柱状图、饼图、雷达图等，其他类型的图表正在按业务需求陆续接入。
其中 native 端由客户端插件实现，h5 端使用 g2-mobile
<img src="https://img.alicdn.com/tfs/TB1L5OkQFXXXXX7XVXXXXXXXXXX-630-1128.jpg" width="320" />
## 如何使用
此组件为业务组件，不在 nuke 大包中，需要单独安装依赖。
```bash
npm install nuke-biz-qn-chart --save-dev
```
## API
### LineChart 线图
```js
import { LineChart } from 'nuke-biz-qn-chart';
const data = [
{ time: '2016/08/01 00:00:00', tem: 10 },
{ time: '2016/08/02 00:10:00', tem: 22 },
{ time: '2016/08/03 00:30:00', tem: 20 },
{ time: '2016/08/04 00:35:00', tem: 26 },
{ time: '2016/08/05 01:00:00', tem: 20 },
{ time: '2016/08/06 01:20:00', tem: 26 },
{ time: '2016/08/07 01:40:00', tem: 28 },
{ time: '2016/08/08 02:00:00', tem: 20 },
{ time: '2016/08/09 02:20:00', tem: 28 }
];
const cols = {
time: { alias: '时间' },
tem: { alias: '温度' }
};
<LineChart
id="chart1"
smooth={false}
dragEnabled={true}
scaleEnabled={true}
xAxis={{ name: 'time' }}
yAxis={{ name: 'tem' }}
data={data}
cols={cols}
width={750}
height={350}
ref="chart1"
showLegend={false}
/>;
```
| 参数 | 说明 | 类型 | 默认值 |
| ------------- | -------------------------------------------------------------------------- | --------------------------- | ------------------------------------------------ |
| id | 必填，且唯一 | string | 无 |
| smooth | 是否平滑 | boolean | false |
| dragEnabled | 是否允许拖拽 | boolean | false |
| scaleEnabled | 是否允许缩放 | boolean | false |
| xAxis | x 轴配置 | object，{name:"x 轴字段名"} | 无 |
| yAyis | y 轴配置 | object，{name:"y 轴字段名"} | 无 |
| lineSeperator | 数据分割字段，用于画多条线 | string | |
| data | 数据集 | array | 无 |
| cols | x、y 轴别名 | object | 无 |
| width | 宽 | string | |
| height | 高 | string | |
| showLegend | 是否展示图例 | boolean | true |
| points | 折线上的点绘制配置项 {drawPoints: true,radius:5,filled:false,holeRadius:3} | object | |
| grids | 衬线配置 {lineWidth:10,color:'#eeeeee'} | object | {lineWidth:1,color:'#cccccc'} |
| legend | 图示配置,可选纵向还是横向 ，具体配置见 legend 通用配置 | object | 见 legend 通用配置 |
| lineWidth | 折线宽度 | number | 2 |
| fill | 区域绘制配置项，是否填充区域，填充透明度 {drawFilled: true,fillAlpha:0.3} | object | {drawFilled: false,fillAlpha:0.5} |
| colors | 颜色集 | array | ['#4E7CCC', '#36B3C3', '#4ECDA5', '#94E08A' ...] |
| drawValues | 是否标识出每个点的数据 | boolean | false |
### BarChart 柱状图
```js
import { BarChart } from 'nuke-biz-qn-chart';
const data = [
{ time: '2016-08-01 00:00:00', tem: 10 },
{ time: '2016-08-02 00:10:00', tem: 22 },
{ time: '2016-08-03 00:30:00', tem: 20 },
{ time: '2016-08-04 00:35:00', tem: 26 },
{ time: '2016-08-05 01:00:00', tem: 20 },
{ time: '2016-08-06 01:20:00', tem: 26 },
{ time: '2016-08-07 01:40:00', tem: 28 },
{ time: '2016-08-08 02:00:00', tem: 20 },
{ time: '2016-08-09 02:20:00', tem: 28 }
];
const cols = {
time: { alias: '时间' },
tem: { alias: '温度' }
};
<BarChart
id="chart2"
dragEnabled={true}
scaleEnabled={true}
xAxis={{ name: 'time' }}
yAxis={{ name: 'tem' }}
data={data}
cols={cols}
width={750}
height={350}
ref="chart2"
showLegend={false}
/>;
```
| 参数 | 说明 | 类型 | 默认值 |
| ------------- | ------------------------------------------------------ | --------------------------- | ----------------------------- |
| id | 必填，且唯一 | string | 无 |
| dragEnabled | 是否允许拖拽 | boolean | false |
| scaleEnabled | 是否允许缩放 | boolean | false |
| xAxis | x 轴配置 | object，{name:"x 轴字段名"} | 无 |
| yAyis | y 轴配置 | object，{name:"y 轴字段名"} | 无 |
| lineSeperator | 数据分割字段，用于画多条线 | string | |
| data | 数据集 | array | 无 |
| cols | x、y 轴别名 | object | 无 |
| width | 宽 | string | |
| height | 高 | string | |
| showLegend | 是否展示图例 | boolean | true |
| legend | 图示配置,可选纵向还是横向 ，具体配置见 legend 通用配置 | object | 见 legend 通用配置 |
| grids | 衬线配置 {lineWidth:10,color:'#eeeeee'} | object | {lineWidth:1,color:'#cccccc'} |
### PieChart 饼图
```js
import { PieChart } from 'nuke-biz-qn-chart';
const data = [
{ value: 5, label: '小朋友1' },
{ value: 12, label: '小朋友2' },
{ value: 3, label: '小朋友3' }
];
<PieChart
id="chart3"
rotationEnabled={true}
value={{ name: 'value' }}
label={{ name: 'label' }}
data={data}
width={450}
height={450}
ref="chart3"
/>;
```
| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ------------------------------------------------------ | --------------------------- | ------------------------------------------------------------------------------------------------------- |
| id | 必填，且唯一 | string | 无 |
| rotationEnabled | 是否允许旋转 | boolean | false |
| value | 数据圈配置 | object，{name:"数据字段名"} | 无 |
| label | 标签配置 | object，{name:"标签字段名"} | 无 |
| data | 数据集 | array | 无 |
| cols | x、y 轴别名 | object | 无 |
| width | 宽 | string | 无 |
| height | 高 | string | 无 |
| legend | 图示配置,可选纵向还是横向 ，具体配置见 legend 通用配置 | object | 见 legend 通用配置 |
| inner | 内部空心圈设置 | object | {drawHoleEnabled = false,radius = 0.6,backgroundColor = "#ffffff",text = "",color="#00000",fontSize=12} |
| drawLabels | 是否绘制每块 label 文本 | boolean | true |
| tapEnabled | 是否允许点击高亮 | boolean | false |
| animate | 是否允许动画 | boolean | true |
### RadarChart 雷达图
```js
import { RadarChart } from 'nuke-biz-qn-chart';
const data = [
{ name: '张飞', props: '智力', value: 65 },
{ name: '张飞', props: '武力', value: 97 },
{ name: '张飞', props: '政治', value: 50 },
{ name: '张飞', props: '统帅', value: 92 },
{ name: '张飞', props: '忠诚', value: 100 },
{ name: '关羽', props: '智力', value: 80 },
{ name: '关羽', props: '武力', value: 94 },
{ name: '关羽', props: '政治', value: 70 },
{ name: '关羽', props: '统帅', value: 95 },
{ name: '关羽', props: '忠诚', value: 99 }
];
<RadarChart
id="chart4"
lineSeperator="name"
rotationEnabled={true}
xAxis={{ name: 'props' }}
yAxis={{ name: 'value' }}
data={data}
width={700}
height={800}
ref="chart4"
showLegend={true}
/>;
```
| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ----------------------------------------------------------------------------------- | --------------------------- | ------------------------------------------- |
| id | 必填，且唯一 | string | 无 |
| rotationEnabled | 是否允许旋转 | boolean | false |
| scaleEnabled | 是否允许缩放 | boolean | false |
| xAxis | x 轴配置 | object，{name:"x 轴字段名"} | 无 |
| yAyis | y 轴配置 | object，{name:"y 轴字段名"} | 无 |
| lineSeperator | 数据分割字段，用于画多个圈 | string | |
| data | 数据集 | array | 无 |
| width | 宽 | string | |
| height | 高 | string | |
| showLegend | 是否展示图例 | boolean | true |
| legend | 图示配置,可选纵向还是横向 ，具体配置见 legend 通用配置 | object | 见 legend 通用配置 |
| grids | 衬线配置 {lineWidth:1,color:'#eeeeee',lineAlpha:0.9} | object | {lineWidth:1,color:'#eeeeee',lineAlpha:0.9} |
| opacity | 如 `0.7`。图形区域透明度，如果不传不填充，如果传入，按照 colors 颜色 + 透明度值填充 | Float | |
### legend 通用配置
```js
{
//legend 方向，默认横向
orientation: 'HORIZONTAL',//VERTICAL ,HORIZONTAL
//legend 文字颜色
color:'#333333',
//legend 文字字号
fontSize:9,
// x 方向位置，默认左， x，y 确定图例画的位置，默认左下角。
horizontalAlignment:'LEFT', //LEFT, CENTER, RIGHT; 默认 LEFT
// y 方向位置，默认底
verticalAlignment: 'BOTTOM', //TOP, CENTER, BOTTOM; 默认 BOTTOM
//图例方向
direction:'LEFT_TO_RIGHT' ////LEFT_TO_RIGHT, RIGHT_TO_LEFT
}
```
## changelog
* @0.0.12 2017.7.7
* line-chart 新增区域填充，可以填充折线图下放区域
* @0.0.9 2017.5.23
* 新增雷达图
* 增加 legend 图例位置配置项