mobile / yh_vendor · Commits

Go to a project

Authored by 盖剑秋
Commit e23ddc868016aeb960886627087b683dea9b55db 1 parent 18d03a80

Add line chart to statistics.. Reviewer: Yu Liang.

Inline Side-by-side
Showing 8 changed files with 188 additions and 1 deletions
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
  1 +'use strict';
  2 +
  3 +import React, {Component} from 'react';
  4 +import {
  5 + WebView,
  6 + StyleSheet,
  7 + View,
  8 + Text,
  9 +} from 'react-native';
  10 +
  11 +export default class ChartView extends Component {
  12 + constructor(props) {
  13 + super(props)
  14 + }
  15 +
  16 + render() {
  17 +
  18 +
  19 + let xString = this.props.xData.reduce((previous, current, index, array) => {
  20 + if (index==1) {
  21 + previous = `\'` + previous + `\'`;
  22 + }
  23 + return previous + ','+ `\'` + current+ `\'`;
  24 + });
  25 + // xString = '\'' + xString;
  26 +
  27 + console.log(xString);
  28 +
  29 + const HTML = getHTMLString(xString,this.props.yData.toString());
  30 + console.log(this.props.yData);
  31 +
  32 + return(
  33 + <View style={styles.container}>
  34 + <Text style={styles.titleStyle}>{this.props.chartTitle}</Text>
  35 + <WebView
  36 + style={styles.chartStyle}
  37 + bounces={false}
  38 + automaticallyAdjustContentInsets={true}
  39 + source={{html:HTML}}
  40 + scalesPageToFit={true}
  41 + startInLoadingState={false}
  42 + javaScriptEnabled={true}
  43 + />
  44 + </View>
  45 + );
  46 + }
  47 +}
  48 +
  49 +const styles = StyleSheet.create({
  50 + container: {
  51 + backgroundColor: 'white',
  52 + },
  53 + titleStyle: {
  54 + fontSize: 14,
  55 + color: '#b1b1b1',
  56 + marginTop: 20,
  57 + marginLeft: 15,
  58 + },
  59 + chartStyle: {
  60 + height: 175,
  61 + marginLeft: -45,
  62 + marginRight: -45,
  63 + marginBottom: 15,
  64 + },
  65 +});
  66 +
  67 +function getHTMLString(xData,yData) {
  68 + const HTML = `
  69 + <!DOCTYPE html>
  70 + <html style="height: 100%">
  71 + <head>
  72 + <meta charset="utf-8">
  73 + </head>
  74 + <body style="height: 100%; margin: 0">
  75 + <div id="container" style="height: 100%"></div>
  76 + <script type="text/javascript" src="http://cdn.bootcss.com/echarts/3.0.0/echarts.min.js"></script>
  77 + <script type="text/javascript">
  78 + var dom = document.getElementById("container");
  79 + var myChart = echarts.init(dom);
  80 + var app = {};
  81 + option = null;
  82 + option = {
  83 + title: {
  84 + show: false,
  85 + },
  86 + xAxis: {
  87 + type: 'category',
  88 + boundaryGap: true,
  89 + axisLine: {
  90 + show: true,
  91 + onZero: false,
  92 + lineStyle: {
  93 + width: 1,
  94 + color: 'gray',
  95 + },
  96 + },
  97 + axisTick: {
  98 + show:false,
  99 + },
  100 + axisLabel: {
  101 + textStyle: {
  102 + color: '#b1b1b1',
  103 + fontSize: 24,
  104 + },
  105 + },
  106 + splitLine: {
  107 + show: false,
  108 + },
  109 + data:[`+xData+`]
  110 + },
  111 + yAxis: {
  112 + type: 'value',
  113 + axisLine: {
  114 + show: false,
  115 + onZero: false,
  116 + },
  117 + axisTick: {
  118 + show:false,
  119 + },
  120 + axisLabel: {
  121 + show: false,
  122 + },
  123 + },
  124 + tooltip: {
  125 + show: true,
  126 + showContent: true,
  127 + trigger: 'axis',
  128 + alwaysShowContent: 'true',
  129 + position: function (point,params,dom) {
  130 + return [point[0]/7*7-40,0];
  131 + },
  132 + backgroundColor: 'orange',
  133 + formatter: '{c}',
  134 + textStyle: {
  135 + fontSize: 24,
  136 + },
  137 + axisPointer: {
  138 + type: 'line',
  139 + lineStyle: {
  140 + opacity: 1,
  141 + },
  142 + },
  143 + extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
  144 + padding:[10,20],
  145 + },
  146 + series: [
  147 + {
  148 + type:'line',
  149 + lineStyle: {
  150 + normal: {
  151 + color: 'orange',
  152 + },
  153 + },
  154 + smooth: true,
  155 + data:[` + yData + `],
  156 + },
  157 + ]
  158 + };
  159 + if (option && typeof option === "object") {
  160 + myChart.setOption(option, true);
  161 + }
  162 + </script>
  163 + </body>
  164 + </html>
  165 + `;
  166 + return HTML;
  167 +}
This diff could not be displayed because it is too large.
@@ -12,6 +12,7 @@ import TrendTextSection from './TrendTextSection'; @@ -12,6 +12,7 @@ import TrendTextSection from './TrendTextSection';
12 import Placeholder from './Placeholder'; 12 import Placeholder from './Placeholder';
13 import CalendarTrigger from './calendar/CalendarTrigger'; 13 import CalendarTrigger from './calendar/CalendarTrigger';
14 import CalendarPicker from './calendar/CalendarPicker'; 14 import CalendarPicker from './calendar/CalendarPicker';
  15 +import ChartView from './LineChart/ChartView'
15 16
16 export default class RefoundStatistics extends Component { 17 export default class RefoundStatistics extends Component {
17 18
@@ -86,6 +87,8 @@ export default class RefoundStatistics extends Component { @@ -86,6 +87,8 @@ export default class RefoundStatistics extends Component {
86 } 87 }
87 88
88 render() { 89 render() {
  90 +
  91 + const months = ['4月','5月','6月','7月','8月','9月'];
89 return ( 92 return (
90 <ScrollView contentContainerStyle={{flex: 1}}> 93 <ScrollView contentContainerStyle={{flex: 1}}>
91 <CalendarTrigger date={this.state.selectdDate} toogleSelector={this.toogleSelector} /> 94 <CalendarTrigger date={this.state.selectdDate} toogleSelector={this.toogleSelector} />
@@ -94,6 +97,11 @@ export default class RefoundStatistics extends Component { @@ -94,6 +97,11 @@ export default class RefoundStatistics extends Component {
94 <TrendTextSection content={this.props.section2} /> 97 <TrendTextSection content={this.props.section2} />
95 <TrendTextSection content={this.props.section3} /> 98 <TrendTextSection content={this.props.section3} />
96 <Placeholder /> 99 <Placeholder />
  100 + <ChartView
  101 + chartTitle={'近6个月退货趋势'}
  102 + xData={months}
  103 + yData={this.props.sixMonthValue}
  104 + />
97 105
98 {this.state.showPicker ? <CalendarPicker calendarModes={this.calendarModes} selectMode={this.state.selectMode} selected={this.state.selected} onCancel={this.onCancel} onOK={this.onOK}/> : null} 106 {this.state.showPicker ? <CalendarPicker calendarModes={this.calendarModes} selectMode={this.state.selectMode} selected={this.state.selected} onCancel={this.onCancel} onOK={this.onOK}/> : null}
99 107
@@ -5,6 +5,7 @@ import TrendTextSection from './TrendTextSection'; @@ -5,6 +5,7 @@ import TrendTextSection from './TrendTextSection';
5 import Placeholder from './Placeholder'; 5 import Placeholder from './Placeholder';
6 import CalendarTrigger from './calendar/CalendarTrigger'; 6 import CalendarTrigger from './calendar/CalendarTrigger';
7 import CalendarPicker from './calendar/CalendarPicker'; 7 import CalendarPicker from './calendar/CalendarPicker';
  8 +import ChartView from './LineChart/ChartView'
8 9
9 let { 10 let {
10 Component, 11 Component,
@@ -102,6 +103,9 @@ export default class SaleStatistics extends Component { @@ -102,6 +103,9 @@ export default class SaleStatistics extends Component {
102 103
103 render() { 104 render() {
104 105
  106 + let months = ['5.01','5.02','5.03','5.04','5.05','5.06','5.07'];
  107 + let data = [100,122,80,110,140,77,151];
  108 +
105 return ( 109 return (
106 <ScrollView contentContainerStyle={{flex: 1}}> 110 <ScrollView contentContainerStyle={{flex: 1}}>
107 <CalendarTrigger date={this.state.selectdDate} toogleSelector={this.toogleSelector} /> 111 <CalendarTrigger date={this.state.selectdDate} toogleSelector={this.toogleSelector} />
@@ -109,6 +113,11 @@ export default class SaleStatistics extends Component { @@ -109,6 +113,11 @@ export default class SaleStatistics extends Component {
109 <TrendTextSection content={this.props.section1} /> 113 <TrendTextSection content={this.props.section1} />
110 <TrendTextSection content={this.props.section2} /> 114 <TrendTextSection content={this.props.section2} />
111 <Placeholder /> 115 <Placeholder />
  116 + <ChartView
  117 + chartTitle={'近7天交易趋势'}
  118 + xData={months}
  119 + yData={data}
  120 + />
112 121
113 {this.state.showPicker ? <CalendarPicker calendarModes={this.calendarModes} selectMode={this.state.selectMode} selected={this.state.selected} onCancel={this.onCancel} onOK={this.onOK}/> : null} 122 {this.state.showPicker ? <CalendarPicker calendarModes={this.calendarModes} selectMode={this.state.selectMode} selected={this.state.selected} onCancel={this.onCancel} onOK={this.onOK}/> : null}
114 123
@@ -12,6 +12,7 @@ import { @@ -12,6 +12,7 @@ import {
12 Platform, 12 Platform,
13 } 13 }
14 from 'react-native'; 14 from 'react-native';
  15 +import Immutable, {List, Record} from 'immutable';
15 16
16 import {bindActionCreators} from 'redux'; 17 import {bindActionCreators} from 'redux';
17 import {connect} from 'react-redux'; 18 import {connect} from 'react-redux';
@@ -93,12 +94,14 @@ export default class RefoundStatisticsContainer extends Component { @@ -93,12 +94,14 @@ export default class RefoundStatisticsContainer extends Component {
93 }, 94 },
94 ]; 95 ];
95 96
  97 + let trendInSixMonth = this.props.refoundStats.trendInSixMonth.toJS();
96 return ( 98 return (
97 <View style={styles.container}> 99 <View style={styles.container}>
98 <RefoundStatistics 100 <RefoundStatistics
99 section1={section1} 101 section1={section1}
100 section2={section2} 102 section2={section2}
101 section3={section3} 103 section3={section3}
  104 + sixMonthValue={trendInSixMonth}
102 /> 105 />
103 </View> 106 </View>
104 ); 107 );
@@ -18,7 +18,7 @@ let InitialState = Record({ @@ -18,7 +18,7 @@ let InitialState = Record({
18 percentRatio:0, 18 percentRatio:0,
19 percentRise:false, 19 percentRise:false,
20 20
21 - trendInSixMonth: List(), 21 + trendInSixMonth: List([11, 30, 140, 80, 110, 130]),
22 }); 22 });
23 23
24 export default InitialState; 24 export default InitialState;