Skip to content

B
biz.qingxiao.com
Commit 8a0020c3 authored by wangxuelai's avatar wangxuelai
Browse files
Options

''

parent 2db46dc5
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 372 deletions
src/pages/index/index.js
View file @ 8a0020c3
......@@ -29,343 +29,13 @@ import AddCourseTime from '../classdetail/AddCourseTime';
const { RangePicker } = DatePicker;
const echarts = require('echarts');
function getComponent(data) {
const ds = new DataSet({
state: {
start: new Date('2009/7/20 0:00').getTime(),
end: new Date('2009/9/9 0:00').getTime(),
},
});
const dv = ds.createView('origin').source(data);
dv.transform({
type: 'filter',
callback(obj) {
const time = new Date(obj.time).getTime(); // !注意：时间格式，建议转换为时间戳进行比较
return time >= ds.state.start && time <= ds.state.end;
},
});
console.log(dv);
const scale = {
month: {
type: 'time',
tickCount: 8,
},
};
let chart;
class SliderChart extends React.Component {
// eslint-disable-next-line class-methods-use-this
onChange(obj) {
const { startValue, endValue } = obj;
ds.setState('start', startValue);
ds.setState('end', endValue);
}
render() {
const SliderChart = getComponent(data);
return (
<div>
<Chart
height={window.innerHeight - 50}
data={dv}
scale={scale}
padding="auto"
forceFit
>
<Axis name="month" />
<Axis
name="clock_count"
label={{
formatter: val => `${val}`,
}}
/>
<Tooltip
g2-tooltip={{
backgroundColor: '#000',
opacity: '0.75',
color: '#FFFFFF',
}}
crosshairs={{
type: 'y',
fill: '#000',
stroke: '#000',
}}
/>
<Legend
textStyle={{ fontSize: '15', fill: '#5c5c5c', textBaseline: 'middle' }}
marker="circle"
offsetY={-45}
position="top-right"
items={[
{
value: 'student_count',
marker: {
fill: '#E32020',
radius: 2,
},
}, {
value: 'clock_people_count',
marker: {
fill: '#1890FF',
radius: 2,
},
},
{
value: 'clock_count',
marker: {
fill: '#2FC25B',
radius: 2,
},
},
]}
/>
<Geom
type="line"
position="month*student_count"
color={['name', ['#E32020', '#1890FF', '#2FC25B']]}
size={3}
/>
<Geom
type="line"
position="month*clock_people_count"
color={['name', ['#E32020', '#1890FF', '#2FC25B']]}
size={3}
/>
<Geom
type="line"
position="month*clock_count"
color={['name', ['#E32020', '#1890FF', '#2FC25B']]}
size={3}
/>
</Chart>
<div>
<Slider
width="auto"
height={26}
start={ds.state.start}
end={ds.state.end}
xAxis="month"
yAxis="clock_count"
scales={{
month: {
type: 'time',
tickCount: 10,
},
}}
data={dv}
backgroundChart={{
type: 'line',
}}
onChange={this.onChange}
/>
</div>
</div>
);
}
}
return SliderChart;
}
// eslint-disable-next-line react/no-multi-comp
class StaticCenter extends React.Component {
componentDidMount() { // 挂载
pageIn('轻校-概况');
// const { clockCharts, clockChartsSuccess } = this.props;
// if (!clockChartsSuccess) {
// return;
// }
// const myChart = echarts.init(document.getElementById('staticcharts'), {
// width: 'auto',
// height: 'auto',
// });
// // 绘制图表
// const option = {
// tooltip: {
// trigger: 'axis',
// },
// color: ['#E32020', '#1890FF', '#2FC25B'],
// legend: {
// data: ['新增学员(人)', '打卡数(人)', '打卡总数'],
// },
//
// grid: {
// left: '3%',
// right: '4%',
// bottom: '10%',
// containLabel: true,
// },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// data: clockCharts.dates,
// nameTextStyle: {
// color: '#000000',
// borderColor: '#3366ff',
// },
// axisLine: {
// lineStyle: {
// color: '#000000',
// },
// },
// },
// yAxis: {
// type: 'value',
// nameTextStyle: {
// color: '#ff0000',
// borderColor: '#3366ff',
// },
// axisLine: {
// lineStyle: {
// color: '#000000',
// },
// },
// },
// series: [
// {
// name: '新增学员(人)',
// type: 'line',
// // data: clockCharts.student_count,
// data: [220, 182, 191, 234, 290, 330, 310],
// lineStyle: {
// normal: {
// color: '#E32020',
// width: 3,
// },
// },
// smooth: true,
// },
// {
// name: '打卡数(人)',
// type: 'line',
// // data: clockCharts.clock_people_count,
// data: [120, 132, 101, 134, 90, 230, 210],
// lineStyle: {
// normal: {
// color: '#1890FF',
// width: 3,
// },
// },
//
// smooth: true,
// },
// {
// name: '打卡总数',
// type: 'line',
// // data: clockCharts.clock_count,
// data: [150, 232, 201, 154, 190, 330, 410],
// lineStyle: {
// normal: {
// color: '#2FC25B',
// width: 3,
// },
// },
// smooth: true,
// },
//
//
// ],
// };
// myChart.setOption(option);
}
componentDidUpdate() {
const { clockCharts, clockChartsSuccess } = this.props;
// if (!clockChartsSuccess) {
// return;
// }
// this.dayshift(7);
// const myChart = echarts.init(document.getElementById('staticcharts'), {
// width: 'auto',
// height: 'auto',
// });
// // 绘制图表
// const option = {
// tooltip: {
// trigger: 'axis',
// },
// color: ['#E32020', '#1890FF', '#2FC25B'],
// legend: {
// data: ['新增学员(人)', '打卡数(人)', '打卡总数'],
// },
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true,
// },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// data: clockCharts.dates,
// nameTextStyle: {
// color: '#000000',
// borderColor: '#3366ff',
// },
// axisLine: {
// lineStyle: {
// color: '#000000',
// },
// },
// },
// yAxis: {
// type: 'value',
// nameTextStyle: {
// color: '#ff0000',
// borderColor: '#3366ff',
// },
// axisLine: {
// lineStyle: {
// color: '#000000',
// },
// },
// },
// series: [
// {
// name: '新增学员(人)',
// type: 'line',
// // data: clockCharts.student_count,
// data: [220, 182, 191, 234, 290, 330, 310],
// lineStyle: {
// normal: {
// color: '#E32020',
// width: 3,
// },
// },
// smooth: true,
// },
// {
// name: '打卡数(人)',
// type: 'line',
// // data: clockCharts.clock_people_count,
// data: [120, 132, 101, 134, 90, 230, 210],
// lineStyle: {
// normal: {
// color: '#1890FF',
// width: 3,
// },
// },
// smooth: true,
// },
// {
// name: '打卡总数',
// type: 'line',
// // data: clockCharts.clock_count,
// data: [150, 232, 201, 154, 190, 330, 410],
// lineStyle: {
// normal: {
// color: '#2FC25B',
// width: 3,
// },
// },
// smooth: true,
// },
//
//
// ],
// };
// myChart.setOption(option);
}
componentWillUnmount() { // 卸载
}
......@@ -515,19 +185,17 @@ class StaticCenter extends React.Component {
});
}
onRangePickerChange =(dates, dateStrings) => {
console.log(dateStrings[0]);
this.dayshift(dateStrings[0], dateStrings[1]);
}
onSlideChange =(obj) => {
const {
startValue, endValue, startText, endText,
startValue, endValue,
} = obj;
// eslint-disable-next-line no-undef
this.ds.setState('start', startText);
// eslint-disable-next-line no-undef
this.ds.setState('end', endText);
this.ds.setState('start', startValue);
this.ds.setState('end', endValue);
}
render() {
const that = this;
const {
staticcenter,
clockCharts,
......@@ -553,51 +221,32 @@ class StaticCenter extends React.Component {
const clockCount = dataArray.clock_count;
const peopleCount = dataArray.clock_people_count;
const studentCount = dataArray.student_count;
// eslint-disable-next-line no-array-constructor
const chartArea = Array();
const chartArea = [];
for (let i = 0; i < month.length && i < clockCount.length && i < peopleCount.length && i < studentCount.length; i++) {
chartArea.push({ month: month[i], student_count: studentCount[i], name: '新增学员' }, { month: month[i], clock_people_count: peopleCount[i], name: '打卡数(人)' }, { month: month[i], clock_count: clockCount[i], name: '打卡总数' });
// chartArea.push({
// month: month[i], student_count: studentCount[i], clock_people_count: peopleCount[i], clock_count: clockCount[i],
// });
// chartArea.push({ month: month[i], student_count: studentCount[i], name: '新增学员' }, { month: month[i], clock_count: clockCount[i], name: '打卡数' }, { month: month[i], people_count: peopleCount[i], name: '学员总数' });
chartArea.push({ month: month[i], count: Math.floor(Math.random() * 100), name: '新增学员' }, { month: month[i], count: Math.floor(Math.random() * 200), name: '打卡数' }, { month: month[i], count: Math.floor(Math.random() * 300), name: '学员总数' });
}
let data;
// eslint-disable-next-line prefer-const
data = chartArea;
// const yesterday = chartArea[0].month;
// const today = chartArea[chartArea.length - 1].month;
// const ds = new DataSet({
// state: {
// start: new Date('2009/7/20 0:00').getTime(),
// end: new Date('2009/9/9 0:00').getTime(),
// },
// });
const data = chartArea;
this.ds = new DataSet({
state: {
start: formatDay(new Date(chartStartDate).getTime() / 1000),
end: formatDay(new Date(chartEndDate).getTime() / 1000),
start: chartStartDate,
end: chartEndDate,
},
});
const dv = this.ds.createView('origin').source(data);
dv.transform({
type: 'filter',
callback(obj) {
const time = new Date(obj.month.replace(/-/g, '-')).getTime(); // !注意：时间格式，建议转换为时间戳进行比较
return time >= that.ds.state.start && time <= that.ds.state.end;
},
});
console.log(new Date(chartStartDate).getTime(), '100000');
// console.log(this.ds.state.start, '.state.start');
// console.log(this.ds.state.end, '.state.end');
// console.log(chartArea, 'chartArea');
// const dv = this.ds.createView('origin').source(chartArea);
// dv.transform({
// type: 'filter',
// callback(obj) {
// const time = new Date(obj.time).getTime(); // !注意：时间格式，建议转换为时间戳进行比较
// return time >= this.ds.state.start && time <= this.ds.state.end;
// },
// });
// console.log(dv);
const cols = {
month: {
type: 'time',
tickCount: 8,
},
};
const SliderChart = getComponent(data);
return (
<div className={pageStyle.container}>
<ClassRoomMgt
......@@ -686,11 +335,95 @@ class StaticCenter extends React.Component {
</div>
</div>
<div className={pageStyle.chartcontent}>
{/* eslint-disable-next-line no-undef */}
{clockChartsSuccess && chartArea.length > 0 &&
<div style={{ width: '100%' }}>
{/* eslint-disable-next-line no-undef */}
<SliderChart />
<Chart
height={window.innerHeight - 50}
data={dv}
scale={cols}
padding="auto"
forceFit
>
<Axis name="month" />
<Tooltip
g2-tooltip={{
backgroundColor: '#000',
opacity: '0.75',
color: '#FFFFFF',
}}
crosshairs={{
type: 'y',
fill: '#000',
stroke: '#000',
}}
/><Legend
textStyle={{ fontSize: '15', fill: '#5c5c5c', textBaseline: 'middle' }}
marker="circle"
offsetY={-45}
position="top-right"
items={[
{
value: 'student_count',
marker: {
fill: '#E32020',
radius: 2,
},
}, {
value: 'clock_people_count',
marker: {
fill: '#1890FF',
radius: 2,
},
},
{
value: 'clock_count',
marker: {
fill: '#2FC25B',
radius: 2,
},
},
]}
/>
<Geom
type="line"
position="month*count"
color={['name', ['#E32020', '#1890FF', '#2FC25B']]}
size={3}
/>
<Geom
type="line"
position="month*count"
color={['name', ['#E32020', '#1890FF', '#2FC25B']]}
size={3}
/>
<Geom
type="line"
position="month*count"
color={['name', ['#E32020', '#1890FF', '#2FC25B']]}
size={3}
/>
</Chart>
<div>
<Slider
width="auto"
height={26}
start={this.ds.state.start}
end={this.ds.state.end}
xAxis="month"
yAxis="clock_count"
scales={{
month: {
type: 'time',
tickCount: 10,
},
}}
data={dv}
backgroundChart={{
type: 'line',
}}
onChange={this.onSlideChange}
/>
</div>
</div>
}
{!clockChartsSuccess && <div className={pageStyle.chartcontentfail}>数据加载失败</div>}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment