|
@@ -0,0 +1,283 @@
|
|
|
+import React, { Component } from 'react';
|
|
|
+import {
|
|
|
+ StyleSheet,
|
|
|
+ Text,
|
|
|
+ View,
|
|
|
+ TouchableOpacity,
|
|
|
+ Image,
|
|
|
+} from 'react-native';
|
|
|
+
|
|
|
+import {NativeModules} from 'react-native';
|
|
|
+const YRRnBridge = NativeModules.YRRnBridge;
|
|
|
+
|
|
|
+import Echarts from 'native-echarts';
|
|
|
+import Dimensions from 'Dimensions';
|
|
|
+import NavigationUtil from "../../navigator/NavigationUtil";
|
|
|
+const {width} = Dimensions.get('window');
|
|
|
+
|
|
|
+export default class BIChartsItem extends Component {
|
|
|
+
|
|
|
+
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+
|
|
|
+ const{typeTitle} = this.props;
|
|
|
+
|
|
|
+
|
|
|
+ const typeOptions = {
|
|
|
+
|
|
|
+ apple:[2, 4, 7, 2, 2, 7, 13, 16],
|
|
|
+ organ: [6, 9, 9, 2, 8, 7, 17, 18],
|
|
|
+ banana: [6, 9, 3, 2, 8, 7, 1, 8],
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ title:{
|
|
|
+ text:'水果对比',
|
|
|
+ top:'0',
|
|
|
+ left:'10',
|
|
|
+ font:10,
|
|
|
+ textStyle:{
|
|
|
+
|
|
|
+ fontSize: 18,
|
|
|
+ color:'darkGray',
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip : {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+
|
|
|
+ legend: {
|
|
|
+ padding:[
|
|
|
+
|
|
|
+ 240,
|
|
|
+ 100,
|
|
|
+ 100,
|
|
|
+ 100,
|
|
|
+ ],
|
|
|
+ data:['苹果','橘子','香蕉']
|
|
|
+ },
|
|
|
+
|
|
|
+ toolbox: {
|
|
|
+
|
|
|
+ orient: 'horizontal',
|
|
|
+ show : false,
|
|
|
+ showTitle:true,
|
|
|
+ feature : {
|
|
|
+
|
|
|
+ dataView : {show: true, readOnly: true},
|
|
|
+ magicType : {
|
|
|
+
|
|
|
+ type: ['line', 'bar','stack','tiled'],
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis : [
|
|
|
+ {
|
|
|
+
|
|
|
+ boundaryGap:true,
|
|
|
+ type : 'category',
|
|
|
+ name : '时间',
|
|
|
+ data : ['1月','2月','3月','4月','5月','6月','7月','8月']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis : [
|
|
|
+ {
|
|
|
+ type : 'value',
|
|
|
+ name : '销量(kg)'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ color:['rgb(249,159,94)','rgb(67,205,126)','rgb(167,205,126)'],
|
|
|
+
|
|
|
+ series : [
|
|
|
+ {
|
|
|
+ name:'苹果',
|
|
|
+
|
|
|
+ type:typeTitle,
|
|
|
+ data:typeOptions.apple
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'橘子',
|
|
|
+ type:typeTitle,
|
|
|
+ data:typeOptions.organ
|
|
|
+ },{
|
|
|
+ name:'香蕉',
|
|
|
+ type:typeTitle,
|
|
|
+ data:typeOptions.banana
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ const pieOptions = {
|
|
|
+ title:{
|
|
|
+ text:'水果对比',
|
|
|
+ top:'0',
|
|
|
+ left:'10',
|
|
|
+ font:10,
|
|
|
+ textStyle:{
|
|
|
+
|
|
|
+ fontSize: 18,
|
|
|
+ color:'darkGray',
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ type:'scroll',
|
|
|
+ data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
|
|
|
+ padding:[
|
|
|
+
|
|
|
+ 240,
|
|
|
+ 100,
|
|
|
+ 100,
|
|
|
+ 100,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ series : [
|
|
|
+ {
|
|
|
+ name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius : '55%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data:[
|
|
|
+ {value:335, name:'直接访问'},
|
|
|
+ {value:310, name:'邮件营销'},
|
|
|
+ {value:334, name:'联盟广告'},
|
|
|
+ {value:135, name:'视频广告'},
|
|
|
+ {value:548, name:'搜索引擎'}
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ emphasis: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.state = {
|
|
|
+
|
|
|
+ options: typeTitle === 'pie' ? pieOptions:option,
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ _onPressAllScreen(){
|
|
|
+
|
|
|
+
|
|
|
+ NavigationUtil.goPage(this.state.options,'AllScreenChart',)
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+
|
|
|
+
|
|
|
+ return (
|
|
|
+ <View style={styles.cell_content}>
|
|
|
+
|
|
|
+ <View style={styles.topView}>
|
|
|
+
|
|
|
+ <Text style={styles.topView_title}>
|
|
|
+
|
|
|
+ 今年水果排行榜和种类
|
|
|
+
|
|
|
+ </Text>
|
|
|
+
|
|
|
+
|
|
|
+ <TouchableOpacity
|
|
|
+
|
|
|
+ style = {styles.topView_touch}
|
|
|
+
|
|
|
+ onPress={()=>this._onPressAllScreen()}
|
|
|
+
|
|
|
+
|
|
|
+ >
|
|
|
+
|
|
|
+ <Image style={styles.topView_image}
|
|
|
+
|
|
|
+ source={{uri: 'bi_allScreen'}}
|
|
|
+
|
|
|
+ >
|
|
|
+
|
|
|
+
|
|
|
+ </Image>
|
|
|
+
|
|
|
+ </TouchableOpacity>
|
|
|
+
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <Echarts option={this.state.options} height={260} width={width}/>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ cell_content:{
|
|
|
+
|
|
|
+ backgroundColor:'white',
|
|
|
+ padding:10,
|
|
|
+ marginTop:10,
|
|
|
+ marginLeft:10,
|
|
|
+ marginRight:10,
|
|
|
+ marginVertical:3,
|
|
|
+ borderColor:'#dddddd',
|
|
|
+ borderWidth:0.5,
|
|
|
+ borderRadius:8,
|
|
|
+ shadowColor:'gray',
|
|
|
+ shadowOffset:{width: 2,height: 2},
|
|
|
+ shadowOpacity:0.4,
|
|
|
+ shadowRadius:1,
|
|
|
+ elevation: 2,
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ topView:{
|
|
|
+
|
|
|
+ height: 30,
|
|
|
+ justifyContent:'space-between',
|
|
|
+ flexDirection:'row',
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ topView_title:{
|
|
|
+
|
|
|
+ fontSize:18,
|
|
|
+ color: '#333333',
|
|
|
+ height:30,
|
|
|
+ marginLeft: 10,
|
|
|
+ width:200,
|
|
|
+ lineHeight:30,
|
|
|
+
|
|
|
+ },
|
|
|
+ topView_touch:{
|
|
|
+
|
|
|
+ padding:1,
|
|
|
+ height:30,
|
|
|
+ width:30,
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ topView_image:{
|
|
|
+
|
|
|
+ marginTop:5,
|
|
|
+ height:20,
|
|
|
+ width:20,
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+});
|