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.
'use strict';
import React, {Component} from 'react';
import {
WebView,
StyleSheet,
View,
Text,
} from 'react-native';
export default class ChartView extends Component {
constructor(props) {
super(props)
}
render() {
let xString = this.props.xData.reduce((previous, current, index, array) => {
if (index==1) {
previous = `\'` + previous + `\'`;
}
return previous + ','+ `\'` + current+ `\'`;
});
// xString = '\'' + xString;
console.log(xString);
const HTML = getHTMLString(xString,this.props.yData.toString());
console.log(this.props.yData);
return(
<View style={styles.container}>
<Text style={styles.titleStyle}>{this.props.chartTitle}</Text>
<WebView
style={styles.chartStyle}
bounces={false}
automaticallyAdjustContentInsets={true}
source={{html:HTML}}
scalesPageToFit={true}
startInLoadingState={false}
javaScriptEnabled={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
},
titleStyle: {
fontSize: 14,
color: '#b1b1b1',
marginTop: 20,
marginLeft: 15,
},
chartStyle: {
height: 175,
marginLeft: -45,
marginRight: -45,
marginBottom: 15,
},
});
function getHTMLString(xData,yData) {
const HTML = `
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://cdn.bootcss.com/echarts/3.0.0/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
show: false,
},
xAxis: {
type: 'category',
boundaryGap: true,
axisLine: {
show: true,
onZero: false,
lineStyle: {
width: 1,
color: 'gray',
},
},
axisTick: {
show:false,
},
axisLabel: {
textStyle: {
color: '#b1b1b1',
fontSize: 24,
},
},
splitLine: {
show: false,
},
data:[`+xData+`]
},
yAxis: {
type: 'value',
axisLine: {
show: false,
onZero: false,
},
axisTick: {
show:false,
},
axisLabel: {
show: false,
},
},
tooltip: {
show: true,
showContent: true,
trigger: 'axis',
alwaysShowContent: 'true',
position: function (point,params,dom) {
return [point[0]/7*7-40,0];
},
backgroundColor: 'orange',
formatter: '{c}',
textStyle: {
fontSize: 24,
},
axisPointer: {
type: 'line',
lineStyle: {
opacity: 1,
},
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
padding:[10,20],
},
series: [
{
type:'line',
lineStyle: {
normal: {
color: 'orange',
},
},
smooth: true,
data:[` + yData + `],
},
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
`;
return HTML;
}
... ...
This diff could not be displayed because it is too large.
... ... @@ -12,6 +12,7 @@ import TrendTextSection from './TrendTextSection';
import Placeholder from './Placeholder';
import CalendarTrigger from './calendar/CalendarTrigger';
import CalendarPicker from './calendar/CalendarPicker';
import ChartView from './LineChart/ChartView'
export default class RefoundStatistics extends Component {
... ... @@ -86,6 +87,8 @@ export default class RefoundStatistics extends Component {
}
render() {
const months = ['4月','5月','6月','7月','8月','9月'];
return (
<ScrollView contentContainerStyle={{flex: 1}}>
<CalendarTrigger date={this.state.selectdDate} toogleSelector={this.toogleSelector} />
... ... @@ -94,6 +97,11 @@ export default class RefoundStatistics extends Component {
<TrendTextSection content={this.props.section2} />
<TrendTextSection content={this.props.section3} />
<Placeholder />
<ChartView
chartTitle={'近6个月退货趋势'}
xData={months}
yData={this.props.sixMonthValue}
/>
{this.state.showPicker ? <CalendarPicker calendarModes={this.calendarModes} selectMode={this.state.selectMode} selected={this.state.selected} onCancel={this.onCancel} onOK={this.onOK}/> : null}
... ...
... ... @@ -5,6 +5,7 @@ import TrendTextSection from './TrendTextSection';
import Placeholder from './Placeholder';
import CalendarTrigger from './calendar/CalendarTrigger';
import CalendarPicker from './calendar/CalendarPicker';
import ChartView from './LineChart/ChartView'
let {
Component,
... ... @@ -102,6 +103,9 @@ export default class SaleStatistics extends Component {
render() {
let months = ['5.01','5.02','5.03','5.04','5.05','5.06','5.07'];
let data = [100,122,80,110,140,77,151];
return (
<ScrollView contentContainerStyle={{flex: 1}}>
<CalendarTrigger date={this.state.selectdDate} toogleSelector={this.toogleSelector} />
... ... @@ -109,6 +113,11 @@ export default class SaleStatistics extends Component {
<TrendTextSection content={this.props.section1} />
<TrendTextSection content={this.props.section2} />
<Placeholder />
<ChartView
chartTitle={'近7天交易趋势'}
xData={months}
yData={data}
/>
{this.state.showPicker ? <CalendarPicker calendarModes={this.calendarModes} selectMode={this.state.selectMode} selected={this.state.selected} onCancel={this.onCancel} onOK={this.onOK}/> : null}
... ...
... ... @@ -12,6 +12,7 @@ import {
Platform,
}
from 'react-native';
import Immutable, {List, Record} from 'immutable';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
... ... @@ -93,12 +94,14 @@ export default class RefoundStatisticsContainer extends Component {
},
];
let trendInSixMonth = this.props.refoundStats.trendInSixMonth.toJS();
return (
<View style={styles.container}>
<RefoundStatistics
section1={section1}
section2={section2}
section3={section3}
sixMonthValue={trendInSixMonth}
/>
</View>
);
... ...
... ... @@ -18,7 +18,7 @@ let InitialState = Record({
percentRatio:0,
percentRise:false,
trendInSixMonth: List(),
trendInSixMonth: List([11, 30, 140, 80, 110, 130]),
});
export default InitialState;
... ...