nuke-biz-qn-chart/theme/bar.jsx

weex 版本千牛业务图表库，基于weex + rax,包含线图、柱状图、饼图、雷达图等，其他类型的图表正在按业务需求陆续接入。其中 native 端由客户端插件实现，h5 端使用 g2-mobile

'use strict';

/** @jsx createElement */
import {createElement, Component,render} from 'rax';

import {Page} from 'nuke';
import {BarChart} from 'nuke-biz-qn-chart';

const data2 = [
    {"time": '周一',"tem": 10.5,"city": "北京"},
    {"time": '周二',"tem": 22,"city": "北京"},
    {"time": '周三',"tem": 20,"city": "北京"},
    {"time": '周四',"tem": 26.4,"city": "北京"},
    {"time": '周五',"tem": 20,"city": "北京"},
    {"time": '周六',"tem": 26,"city": "北京"},
    {"time": '周日',"tem": 28,"city": "北京"},
    {"time": '周一',"tem": 5,"city": "纽约"},
    {"time": '周二',"tem": 12,"city": "纽约"},
    {"time": '周三',"tem": 26,"city": "纽约"},
    {"time": '周四',"tem": 20,"city": "纽约"},
    {"time": '周五',"tem": 28,"city": "纽约"},
    {"time": '周六',"tem": 26,"city": "纽约"},
    {"time": '周日',"tem": 20,"city": "纽约"},
    {"time": '周一',"tem": 22,"city": "上海"},
    {"time": '周二',"tem": 23,"city": "上海"},
    {"time": '周三',"tem": 29,"city": "上海"},
    {"time": '周四',"tem": 24,"city": "上海"},
    {"time": '周五',"tem": 22,"city": "上海"},
    {"time": '周六',"tem": 25,"city": "上海"},
    {"time": '周日',"tem": 22,"city": "上海"}
];

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: '温度' }
};

let App = class NukeDemoIndex extends Component {
    constructor(props) {
        super(props);
    }

    xformat(x){
        let d = new Date(x);
        return (d.getMonth()+1) +'/' + d.getDate();
    }
    render() {

        return (
            <Page title="BarChart">
                <Page.Intro main="基本"></Page.Intro>
                <BarChart dragEnabled={true} scaleEnabled={true} id="bar-chart-1" xAxis={{name:"time",formater:this.xformat}} yAxis={{name:"tem"}} data={data} cols={cols} width={750} height={350} ref="chart1" showLegend={false} colors={['#ff6600']}>
                </BarChart>
                <Page.Intro main="横向柱状图"></Page.Intro>
                <BarChart dragEnabled={true} scaleEnabled={true} horizontal={true} id="bar-chart-2" xAxis={{name:"time",formater:this.xformat}} yAxis={{name:"tem"}} data={data} cols={cols} width={750} height={550} ref="chart2" showLegend={true} legend={{orientation:'VERTICAL'}}>
                </BarChart>
                <Page.Intro main="层叠柱状图(native 暂缺)"></Page.Intro>
                <BarChart dragEnabled={true} scaleEnabled={true} id="bar-chart-3" xAxis={{name:"time"}} yAxis={{name:"tem"}} lineSeperator="city" data={data2} cols={cols} width={750} height={350} ref="chart3">
                </BarChart>
                

               
            </Page>
        );
    }
}

const styles = {

    chart: {
        width:'700rem',
        marginLeft:'25rem',
        height:'700rem'
    },
    button: {
        margin: 10
    }
};



render(<App/>);