nuke-biz-qn-chart v0.0.21

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}
/>;

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}
/>;

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"
/>;

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}
/>;

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