# nuke-biz-qn-chart --- ## 设计思路 weex 版本千牛业务图表库，基于 weex + rax,包含线图、柱状图、饼图、雷达图等，其他类型的图表正在按业务需求陆续接入。 其中 native 端由客户端插件实现，h5 端使用 g2-mobile ## 如何使用 此组件为业务组件，不在 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: '温度' } }; ; ``` | 参数 | 说明 | 类型 | 默认值 | | ------------- | -------------------------------------------------------------------------- | --------------------------- | ------------------------------------------------ | | 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: '温度' } }; ; ``` | 参数 | 说明 | 类型 | 默认值 | | ------------- | ------------------------------------------------------ | --------------------------- | ----------------------------- | | 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' } ]; ; ``` | 参数 | 说明 | 类型 | 默认值 | | --------------- | ------------------------------------------------------ | --------------------------- | ------------------------------------------------------------------------------------------------------- | | 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 } ]; ; ``` | 参数 | 说明 | 类型 | 默认值 | | --------------- | ----------------------------------------------------------------------------------- | --------------------------- | ------------------------------------------- | | 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 图例位置配置项