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

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

'use strict';

/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import { View,Page } from 'nuke';
import { LineChart } from 'nuke-biz-qn-chart';
const data2 = [
    {"time": '周一',"tem": 12.5,"city": "北京"},
    {"time": '周二',"tem": 22.9,"city": "北京"},
    {"time": '周三',"tem": 20,"city": "北京"},
    {"time": '周四',"tem": 26,"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": '12/1',"tem": 0.1},
    {"time": '12/2',"tem": 0.2},
    {"time": '12/3',"tem": 1},
    {"time": '12/4',"tem": 1.2},
    {"time": '12/5',"tem": 1.8},
    {"time": '12/6',"tem": 1.7},
    {"time": '12/7',"tem": 1.1},
    {"time": '12/8',"tem": 0.8},
    {"time": '12/9',"tem": 1.1},
    {"time": '12/10',"tem": 1.9},
    {"time": '12/11',"tem": 2.2},
    {"time": '12/12',"tem": 1.4},
    {"time": '12/13',"tem": 0.8},
    {"time": '12/14',"tem": 1.1},
    {"time": '12/15',"tem": 1.5},
    {"time": '12/16',"tem": 0.8},
    {"time": '12/17',"tem": 1.1},
    {"time": '12/18',"tem": 1.9},
    {"time": '12/19',"tem": 1.4},
    {"time": '12/20',"tem": 1}

];
const cols = {
    time: { alias: '时间' },
    tem: { alias: '温度' }
};

let App = class NukeDemoIndex extends Component {
    constructor(props) {
        super(props);
    }
    del(){
        QN.fetch('https://www.easy-mock.com/mock/58ff2cbf5e43ae5dbea5f834/uiexplorer/item/delete', {
            method: 'DELETE',
            mode: 'cors',
            dataType: 'json',
        })
        .then(response => {
            return response.json(); // => 返回一个 `Promise` 对象
        })
        .then(data => {
            console.log(data)
            
        })
        .catch(error => {
            alert(error);
        }); 
    }  
    xformat(x){
        let d = new Date(x);
        return (d.getMonth()+1) +'/'+ d.getDate();
    }
    render() {

        return (
            <Page title="LineChart">
                <Page.Intro main="基本"></Page.Intro>
                <LineChart style={{backgroundColor:'#f8f8f8'}} dragEnabled={false} scaleEnabled={false} smooth={false} id="line-chart-1" xAxis={{name:"time",show:true}} yAxis={{name:"tem",show:false}} grids={{show:true}} data={data} cols={cols} width={750} height={350} ref="chart1" showYAxis={true} labelCount={8} showLegend={false}>
                </LineChart>
                <Page.Intro main="flex 1"></Page.Intro>
                <View style={{width:750,height:300}}>
                    <LineChart style={{flex:1,backgroundColor:'red'}} width={750} height={350} dragEnabled={false} scaleEnabled={false} smooth={false} id="line-chart-33" xAxis={{name:"time",show:true,labelInterval:6}} yAxis={{name:"tem",show:false}} grids={{show:true}} data={data} cols={cols} ref="chart33" showYAxis={false} labelCount={8} showLegend={false} drawMarkers={true} markerStyle={{backgroundColor:'yellow',textSize:15,textColor:'white'}}>
                    </LineChart>
                </View>
                <Page.Intro main="区域"></Page.Intro>
                <View style={{width:750,height:300}}>
                    <LineChart style={{flex:1}} width={750} height={350} dragEnabled={false} scaleEnabled={false} smooth={false} id="line-chart-44" xAxis={{name:"time",show:true}} yAxis={{name:"tem",show:false}} grids={{show:true}} data={data} cols={cols} ref="chart44" showYAxis={false} labelCount={8} showLegend={false} fill={{drawFilled:true,fillAlpha:0.5}}>
                    </LineChart>
                </View>
                <Page.Intro main="自定义"></Page.Intro>
                <LineChart dragEnabled={true} scaleEnabled={true} smooth={false} id="line-chart-2" xAxis={{name:"time"}} yAxis={{name:"tem"}} data={data} cols={cols} width={750} height={350} ref="chart2" showLegend={false} points={{drawPoints: true,radius:5,filled:false,holeRadius:3}} grids={{show:true,lineWidth:10,color:'#eeeeee'}} lineWidth={2} colors={['#F1A342']}>
                </LineChart>
                <Page.Intro main="双线"></Page.Intro>
                <LineChart dragEnabled={true} scaleEnabled={true} smooth={true} id="line-chart-3" xAxis={{name:"time"}} yAxis={{name:"tem"}} lineSeperator="city" data={data2} cols={cols} width={750} height={350} ref="chart2">
                </LineChart>
               
            </Page>
        );
    }
}

const styles = {

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



render(<App/>);