|
|
@ -1,35 +1,216 @@ |
|
|
|
import React from 'react'; |
|
|
|
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts'; |
|
|
|
import React, { useEffect, useState } from 'react' |
|
|
|
import ReactECharts from 'echarts-for-react' |
|
|
|
import moment from 'moment' |
|
|
|
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts' |
|
|
|
|
|
|
|
import { barCustomSeries, barPrimaryXAxis, barPrimaryYAxis } from '../../data/dummy'; |
|
|
|
import { ChartsHeader } from '../../components'; |
|
|
|
import { useStateContext } from '../../contexts/ContextProvider'; |
|
|
|
import { barCustomSeries, barPrimaryXAxis, barPrimaryYAxis } from '../../data/dummy' |
|
|
|
import { ChartsHeader } from '../../components' |
|
|
|
import { useStateContext } from '../../contexts/ContextProvider' |
|
|
|
import { getDayScreenUseTime } from '../../service/getDayScreenUseTime/index' |
|
|
|
|
|
|
|
const Bar = () => { |
|
|
|
const { currentMode } = useStateContext(); |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl"> |
|
|
|
<ChartsHeader category="Bar" title="Olympic Medal Counts - RIO" /> |
|
|
|
<div className=" w-full"> |
|
|
|
<ChartComponent |
|
|
|
id="charts" |
|
|
|
primaryXAxis={barPrimaryXAxis} |
|
|
|
primaryYAxis={barPrimaryYAxis} |
|
|
|
chartArea={{ border: { width: 0 } }} |
|
|
|
tooltip={{ enable: true }} |
|
|
|
background={currentMode === 'Dark' ? '#33373E' : '#fff'} |
|
|
|
legendSettings={{ background: 'white' }} |
|
|
|
> |
|
|
|
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]} /> |
|
|
|
<SeriesCollectionDirective> |
|
|
|
{/* eslint-disable-next-line react/jsx-props-no-spreading */} |
|
|
|
{barCustomSeries.map((item, index) => <SeriesDirective key={index} {...item} />)} |
|
|
|
</SeriesCollectionDirective> |
|
|
|
</ChartComponent> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
export default Bar; |
|
|
|
const { currentColor, currentMode } = useStateContext() |
|
|
|
let [option, setOption] = useState({}) |
|
|
|
|
|
|
|
/* 生成本周日期, 格式为 MM-DD */ |
|
|
|
function convertDate(date) { |
|
|
|
// 格式化日期 |
|
|
|
var yyyy = date.getFullYear().toString() |
|
|
|
var mm = (date.getMonth() + 1).toString() |
|
|
|
var dd = date.getDate().toString() |
|
|
|
|
|
|
|
var mmChars = mm.split('') |
|
|
|
var ddChars = dd.split('') |
|
|
|
|
|
|
|
return (mmChars[1] ? mm : '0' + mmChars[0]) + '-' + (ddChars[1] ? dd : '0' + ddChars[0]) |
|
|
|
} |
|
|
|
|
|
|
|
let currentWeekDates = new Array(7) |
|
|
|
for (let i = 0; i < 7; i++) { |
|
|
|
const curr = new Date() |
|
|
|
currentWeekDates[i] = convertDate(new Date(curr.setDate(curr.getDate() - curr.getDay() + i))) |
|
|
|
} |
|
|
|
|
|
|
|
let currentWeekScreenTime = new Array(7) |
|
|
|
useEffect(async () => { |
|
|
|
for (let i = 0; i < 7; i++) { |
|
|
|
let receivedJson = await getDayScreenUseTime('2022-' + currentWeekDates[i]) |
|
|
|
currentWeekScreenTime[i] = receivedJson.data.getDayScreenUseTimeH * 3600 + receivedJson.data.getDayScreenUseTimeM * 60 + receivedJson.data.getDayScreenUseTimeS |
|
|
|
} |
|
|
|
|
|
|
|
setOption({ |
|
|
|
backgroundColor: '#031245', |
|
|
|
color: ['#63caff', '#49beff', '#03387a', '#03387a', '#03387a', '#6c93ee', '#a9abff', '#f7a23f', '#27bae7', '#ff6d9d', '#cb79ff', '#f95b5a', '#ccaf27', '#38b99c', '#93d0ff', '#bd74e0', '#fd77da', '#dea700'], |
|
|
|
grid: { |
|
|
|
containLabel: true, |
|
|
|
left: 20, |
|
|
|
right: 20, |
|
|
|
bottom: 10, |
|
|
|
top: 40 |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
axisLabel: { |
|
|
|
color: '#c0c3cd', |
|
|
|
fontSize: 14, |
|
|
|
interval: 0 |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
lineStyle: { |
|
|
|
color: '#384267' |
|
|
|
}, |
|
|
|
show: true |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#384267', |
|
|
|
width: 1, |
|
|
|
type: 'dashed' |
|
|
|
}, |
|
|
|
show: true |
|
|
|
}, |
|
|
|
data: [currentWeekDates[0] + ' 周一', currentWeekDates[1] + ' 周二', currentWeekDates[2] + ' 周三', currentWeekDates[3] + ' 周四', currentWeekDates[4] + ' 周五', currentWeekDates[5] + ' 周六', currentWeekDates[6] + ' 周日'].map(function (str) { |
|
|
|
return str.replace(' ', '\n') |
|
|
|
}), |
|
|
|
type: 'category' |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
axisLabel: { |
|
|
|
color: '#c0c3cd', |
|
|
|
fontSize: 14, |
|
|
|
formatter: (value, index, format) => { |
|
|
|
return Math.floor(value / 3600) + '小时' |
|
|
|
} |
|
|
|
}, |
|
|
|
max: 86400, |
|
|
|
axisTick: { |
|
|
|
lineStyle: { |
|
|
|
color: '#384267', |
|
|
|
width: 1 |
|
|
|
}, |
|
|
|
show: true |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#384267', |
|
|
|
type: 'dashed' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#384267', |
|
|
|
width: 1, |
|
|
|
type: 'dashed' |
|
|
|
}, |
|
|
|
show: true |
|
|
|
}, |
|
|
|
name: '' |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
data: currentWeekScreenTime, // 实际值 |
|
|
|
type: 'bar', |
|
|
|
barMaxWidth: 'auto', |
|
|
|
barWidth: 30, |
|
|
|
itemStyle: { |
|
|
|
color: { |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 1, |
|
|
|
type: 'linear', |
|
|
|
global: false, |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: '#0b9eff' |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: '#63caff' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
// label: { |
|
|
|
// show: false, |
|
|
|
// position: 'top', |
|
|
|
// distance: 10, |
|
|
|
// color: '#fff', |
|
|
|
// formatter: '{c}' |
|
|
|
// } |
|
|
|
}, |
|
|
|
{ |
|
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1], |
|
|
|
type: 'pictorialBar', |
|
|
|
barMaxWidth: '20', |
|
|
|
symbol: 'diamond', |
|
|
|
symbolOffset: [0, '50%'], |
|
|
|
symbolSize: [30, 15] |
|
|
|
}, |
|
|
|
{ |
|
|
|
data: currentWeekScreenTime, |
|
|
|
type: 'pictorialBar', |
|
|
|
barMaxWidth: '20', |
|
|
|
symbolPosition: 'end', |
|
|
|
symbol: 'diamond', |
|
|
|
symbolOffset: [0, '-50%'], |
|
|
|
symbolSize: [30, 12], |
|
|
|
zlevel: 2 |
|
|
|
}, |
|
|
|
{ |
|
|
|
data: [86400, 86400, 86400, 86400, 86400, 86400, 86400, 86400], |
|
|
|
type: 'bar', |
|
|
|
barMaxWidth: 'auto', |
|
|
|
barWidth: 30, |
|
|
|
barGap: '-100%', |
|
|
|
zlevel: -1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1], |
|
|
|
type: 'pictorialBar', |
|
|
|
barMaxWidth: '20', |
|
|
|
symbol: 'diamond', |
|
|
|
symbolOffset: [0, '50%'], |
|
|
|
symbolSize: [30, 15], |
|
|
|
zlevel: -2 |
|
|
|
}, |
|
|
|
{ |
|
|
|
data: [86400, 86400, 86400, 86400, 86400, 86400, 86400, 86400], |
|
|
|
type: 'pictorialBar', |
|
|
|
barMaxWidth: '20', |
|
|
|
symbolPosition: 'end', |
|
|
|
symbol: 'diamond', |
|
|
|
symbolOffset: [0, '-50%'], |
|
|
|
symbolSize: [30, 12], |
|
|
|
zlevel: -1 |
|
|
|
} |
|
|
|
], |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
show: true, |
|
|
|
axisPointer: { |
|
|
|
type: 'shadow' |
|
|
|
}, |
|
|
|
formatter: function(params) { |
|
|
|
let sum = params[0]['data'] |
|
|
|
return Math.floor((sum / 3600)) + '小时' + Math.floor((sum % 3600 / 60)) + '分钟' + Math.floor((sum % 60)) + '秒' |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl"> |
|
|
|
<ChartsHeader category="Bar" title="屏幕使用时间" /> |
|
|
|
<div className=" w-full"> |
|
|
|
<ReactECharts option={option} style={{ height: '600px' }}></ReactECharts> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
export default Bar |