You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.6 KiB
118 lines
3.6 KiB
import React, { useState, useEffect } from 'react'
|
|
import { connect } from 'react-redux';
|
|
import { getFundamental } from '../actions/data';
|
|
import * as echarts from "echarts"
|
|
import "../style.less"
|
|
|
|
const DateModal = (props) => {
|
|
const { dispatch } = props
|
|
const [lists, setLists] = useState([])
|
|
const [keys, setKeys] = useState([])
|
|
const [days, setDays] = useState()
|
|
const [unkeys, setUnkeys] = useState([])
|
|
const [num, setNum] = useState(1)
|
|
useEffect(() => {
|
|
// 获取数据
|
|
dispatch(getFundamental()).then(res => {
|
|
setDays(res.payload.data.date)
|
|
|
|
})
|
|
}, [true])
|
|
|
|
const op = () => {
|
|
// 把获取的数据进行加工
|
|
if (days && num == 1) {
|
|
|
|
var daysValues = Object.values(days)
|
|
var daysKeys = Object.keys(days)
|
|
var list = []
|
|
var arr = []
|
|
var months = []
|
|
for (let index = 6; index >= 0; index--) {
|
|
list.push(daysValues[index])
|
|
}
|
|
setLists(list)
|
|
for (let index = 6; index >= 0; index--) {
|
|
arr.push(daysKeys[index].substring(8))
|
|
}
|
|
for (let index = 6; index >= 0; index--) {
|
|
months.push(daysKeys[index].charAt(5) + "" + daysKeys[index].charAt(6))
|
|
}
|
|
setUnkeys(months)
|
|
setKeys(arr)
|
|
setNum(2)
|
|
}
|
|
}
|
|
op()
|
|
useEffect(() => {
|
|
let a = ([...keys])
|
|
let list = []
|
|
for (let index = 0; index < 7; index++) {
|
|
list.push(a[index])
|
|
}
|
|
for (let index = 0; index < 7; index++) {
|
|
list[index] = list[index] + "日"
|
|
}
|
|
var myChart = echarts.init(document.getElementById('echarts'));
|
|
// window.onresize在重复使用过程中会被覆盖
|
|
// window.onresize = myChart.resize;
|
|
// addEventListener来添加监听resize的事件，将能避免onresize的覆盖问题，并能实现对窗口的监听操作
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize()
|
|
})
|
|
var option = {
|
|
title: {
|
|
text: '近七日填报数量',
|
|
left: "7%"
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
var htmlStr = `填报数量:${params.value}条<br/>${unkeys[params.dataIndex] + "月" + params.name}<br/>`
|
|
return htmlStr;
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: list,
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: '填报数量',
|
|
type: 'bar',
|
|
data: lists,
|
|
barWidth: 40
|
|
}
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
}, [lists])
|
|
return (
|
|
<div id='echarts'></div>
|
|
)
|
|
}
|
|
function mapStateToProps(state) {
|
|
const { auth, depMessage, depUser, global } = state;
|
|
return {
|
|
user: auth.user,
|
|
clientHeight: global.clientHeight,
|
|
loading: depMessage.isRequesting,
|
|
depMessage: depMessage.data || [],
|
|
depUser: depUser.data || []
|
|
};
|
|
}
|
|
export default connect(mapStateToProps)(DateModal)
|