nuke-biz-qn-chart
Version:
weex 版本千牛业务图表库，基于weex + rax,包含线图、柱状图、饼图、雷达图等，其他类型的图表正在按业务需求陆续接入。其中 native 端由客户端插件实现，h5 端使用 g2-mobile
151 lines (132 loc) • 6.07 kB
Markdown
# 线图 demo
- order: 1
线图常见 demo
---
````js
'use strict';
/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import { View,Page ,Button} from 'nuke';
import { LineChart } from 'nuke-biz-qn-chart';
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 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 data3 = [
{"time": '1月',"tem": 10,"city": "beijing"},
{"time": '2月',"tem": 22,"city": "beijing"},
{"time": '3月',"tem": 16,"city": "beijing"},
{"time": '4月',"tem": 26,"city": "beijing"},
{"time": '5月',"tem": 12,"city": "beijing"},
{"time": '6月',"tem": 26,"city": "beijing"},
{"time": '7月',"tem": 18,"city": "beijing"},
{"time": '8月',"tem": 26,"city": "beijing"},
{"time": '9月',"tem": 12,"city": "beijing"},
{"time": '1月',"tem": 28,"city": "newYork"},
{"time": '2月',"tem": 16,"city": "newYork"},
{"time": '3月',"tem": 26,"city": "newYork"},
{"time": '4月',"tem": 12,"city": "newYork"},
{"time": '5月',"tem": 26,"city": "newYork"},
{"time": '6月',"tem": 20,"city": "newYork"},
{"time": '7月',"tem": 22,"city": "newYork"},
{"time": '8月',"tem": 16,"city": "newYork"},
{"time": '9月',"tem": 22,"city": "newYork"},
];
const cols = {
time: { alias: '时间' },
tem: { alias: '温度' }
};
let App = class NukeDemoIndex extends Component {
constructor(props) {
super(props);
this.state = {
tempData : data3
}
}
xformat(x){
let d = new Date(x);
return (d.getMonth()+1) +'/'+ d.getDate();
}
changeData=()=>{
var newData =[...data3];
newData[0]['tem'] = 6;
newData[9]['tem'] = 15;
newData = newData.concat([{"time": '1月',"tem": 8,"city": "sydney"},{"time": '2月',"tem": 6,"city": "sydney"},{"time": '3月',"tem": 19,"city": "sydney"},{"time": '4月',"tem": 12,"city": "sydney"},{"time": '5月',"tem": 25,"city": "sydney"},{"time": '6月',"tem": 25,"city": "sydney"},{"time": '7月',"tem": 17,"city": "sydney"},{"time": '8月',"tem": 26,"city": "sydney"},{"time": '9月',"tem": 12,"city": "sydney"}])
this.setState({
tempData:newData
})
}
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} drawValues={true}>
</LineChart>
<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']} drawMarkers={true}>
</LineChart>
<Page.Intro main="2 组数据的例子"></Page.Intro>
<LineChart dragEnabled={true} scaleEnabled={true} smooth={true} id="line-chart-3" xAxis={{name:"time"}} yAxis={{name:"tem"}} lineSeperator="city" data={this.state.tempData} cols={cols} width={750} height={350} ref="chart3" fill={{drawFilled:true,fillAlpha:0.5}}>
</LineChart>
</Page>
);
}
}
const styles = {
chart: {
width:'700rem',
marginLeft:'25rem',
height:'700rem'
},
button: {
margin: 10
}
};
render(<App/>);
````