nuke-biz-qn-chart

设计思路

weex 版本千牛业务图表库，基于 weex + rax,包含线图、柱状图、饼图、雷达图等，其他类型的图表正在按业务需求陆续接入。

其中 native 端由客户端插件实现，h5 端使用 g2-mobile

如何使用

此组件为业务组件，不在 nuke 大包中，需要单独安装依赖。

npm install nuke-biz-qn-chart --save-dev

API

LineChart 线图

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 柱状图

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

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 雷达图

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 通用配置

{
    //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 图例位置配置项