Merge remote-tracking branch 'origin/main'

main
白封羽 2023-01-04 18:55:54 +08:00
commit e44b27f239
44 changed files with 631 additions and 3 deletions

92
package-lock.json generated
View File

@ -19,6 +19,8 @@
"@types/react-dom": "^18.0.9",
"antd": "^5.1.0",
"axios": "^1.2.1",
"echarts": "^5.4.1",
"echarts-for-react": "^3.0.2",
"history": "^5.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@ -6739,6 +6741,33 @@
"resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
},
"node_modules/echarts": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.4.1"
}
},
"node_modules/echarts-for-react": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz",
"integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==",
"dependencies": {
"fast-deep-equal": "^3.1.3",
"size-sensor": "^1.0.1"
},
"peerDependencies": {
"echarts": "^3.0.0 || ^4.0.0 || ^5.0.0",
"react": "^15.0.0 || >=16.0.0"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@ -15265,6 +15294,11 @@
"resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz",
"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
},
"node_modules/size-sensor": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.1.tgz",
"integrity": "sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA=="
},
"node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@ -17240,6 +17274,19 @@
"engines": {
"node": ">=10"
}
},
"node_modules/zrender": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
},
"dependencies": {
@ -22308,6 +22355,31 @@
"resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
},
"echarts": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.4.1"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"echarts-for-react": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz",
"integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==",
"requires": {
"fast-deep-equal": "^3.1.3",
"size-sensor": "^1.0.1"
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@ -28728,6 +28800,11 @@
"resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz",
"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
},
"size-sensor": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.1.tgz",
"integrity": "sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA=="
},
"slash": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@ -30311,6 +30388,21 @@
"version": "0.1.0",
"resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
},
"zrender": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
"requires": {
"tslib": "2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
}
}
}

View File

@ -14,6 +14,8 @@
"@types/react-dom": "^18.0.9",
"antd": "^5.1.0",
"axios": "^1.2.1",
"echarts": "^5.4.1",
"echarts-for-react": "^3.0.2",
"history": "^5.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
{"type":"FeatureCollection","features":[{"id":"820001","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@LADC^umZ@DONWE@DALBBF@H@DFBBTC"],["@@P@LC@AGM@OECMBABBTCD@DDH"]],"encodeOffsets":[[[116285,22746]],[[116303,22746]]]},"properties":{"cp":[113.552965,22.207882],"name":"花地玛堂区","childNum":2}},{"id":"820002","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@MK@CA@AAGDEB@NVFJG"],"encodeOffsets":[[116281,22734]]},"properties":{"cp":[113.549052,22.199175],"name":"花王堂区","childNum":1}},{"id":"820003","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@EGOB@DNLHE@C"],"encodeOffsets":[[116285,22729]]},"properties":{"cp":[113.550252,22.193791],"name":"望德堂区","childNum":1}},{"id":"820004","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ŸYMVAN@BFCBBDAFHDBBFDHIJJEFDPCHHlYJQ"],"encodeOffsets":[[116313,22707]]},"properties":{"cp":[113.55374,22.188119],"name":"大堂区","childNum":1}},{"id":"820005","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@JICGAECACGEBAAEDBFNXB@"],"encodeOffsets":[[116266,22728]]},"properties":{"cp":[113.54167,22.187778],"name":"风顺堂区","childNum":1}},{"id":"820006","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ ZNWRquZCBCC@AEA@@ADCDCAACEAGBQ@INEL"],"encodeOffsets":[[116265,22694]]},"properties":{"cp":[113.558783,22.154124],"name":"嘉模堂区","childNum":1}},{"id":"820007","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@MOIAIEI@@GE@AAUCBdCFIFR@HAFBBDDBDCBC@@FB@BDDDA\\M"],"encodeOffsets":[[116316,22676]]},"properties":{"cp":[113.56925,22.136546],"name":"路凼填海区","childNum":1}},{"id":"820008","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@DKMMa_GC_COD@dVDBBF@@HJ@JFJBNPZK"],"encodeOffsets":[[116329,22670]]},"properties":{"cp":[113.559954,22.124049],"name":"圣方济各堂区","childNum":1}}],"UTF8Encoding":true}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1
src/assets/rmb.js Normal file
View File

@ -0,0 +1 @@
window._iconfont_svg_string_='<svg><symbol id="icon-renminbi" viewBox="0 0 1024 1024"><path d="M851.2 57.6 608 465.066667l211.2 0 0 72.533333L561.066667 537.6l0 115.2 260.266667 0L821.333333 725.333333 561.066667 725.333333l0 241.066667-96 0L465.066667 725.333333 206.933333 725.333333l0-72.533333 258.133333 0 0-115.2L206.933333 537.6l0-72.533333 211.2 0L172.8 57.6l106.666667 0 234.666667 401.066667L746.666667 57.6 851.2 57.6z" fill="#272636" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,d,c,l,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(d=i,c=n.document,l=!1,r(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,a())})}function a(){l||(l=!0,d())}function r(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}a()}}(window);

35
src/models/Stat.ts Normal file
View File

@ -0,0 +1,35 @@
export interface StatResponse {
/**
* yearly=true1212
*/
departmentStats: Array<DepartmentStat[]>;
invoiceKindsStats: InvoiceKindsStat[];
invoiceLaunchCount: number;
lastAdditionalTotalAmount: number;
lastAllTotalAmount: number;
reimbursementAdditionalTotalAmount: number;
reimbursementAllTotalAmount: number;
reimbursementDepartureStats: ReimbursementDepartureStat[];
reimbursementDestinationStats: ReimbursementDestinationStat[];
reimbursementLaunchCount: number;
}
export interface DepartmentStat {
departmentName: string;
reimbursementAmount: string;
}
export interface InvoiceKindsStat {
invoiceKind: number;
invoiceLaunchCount: number;
}
export interface ReimbursementDepartureStat {
placeName: string;
reimbursementLaunchCount: number;
}
export interface ReimbursementDestinationStat {
placeName: string;
reimbursementLaunchCount: number;
}

View File

@ -368,7 +368,6 @@ function InvoiceManagement(props: {}) {
}).catch(function (error) {
console.log(error)
})
}
useEffect(() => {

View File

@ -1,6 +1,467 @@
import type {DatePickerProps, TimePickerProps} from 'antd';
import {theme, DatePicker, Select, Space, Card, Statistic} from 'antd';
import {ArrowDownOutlined, ArrowUpOutlined, createFromIconfontCN} from '@ant-design/icons'
import {useEffect, useRef, useState} from "react";
import ReactECharts from 'echarts-for-react';
import * as Echarts from 'echarts'
import china from '../../assets/mapjson/china.json'
// @ts-ignore
Echarts.registerMap('china', china);
const {Option} = Select;
type PickerType = 'month' | 'year';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_3830502_eyfw75skyu.js',
});
function HorizontalBarChart(props:{title:string, values: number[], labels: string[]}) {
return <ReactECharts option={{
color: [
'#6395f9',
'#d4e2fd',
'#73deb3',
'#d4f5e8',
'#657798',
'#d0d6e0',
'#7666f9',
'#d5d0fd',
'#f6c022',
'#fcecbd',
],
title: {
text: props.title,
left: 'center'
},
tooltip: {
trigger: 'item'
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
alignWithLabel: true
},
type: 'category',
inverse: true,
data: props.labels,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
series: [
{
name: 'Direct',
type: 'bar',
colorBy: 'data',
emphasis: {
focus: 'series'
},
data: props.values
},
]
}} notMerge={true} lazyUpdate={true}/>
}
function StatView() {
const {
token: {colorBgContainer, colorPrimary, colorSuccess},
} = theme.useToken();
const [type, setType] = useState<PickerType>('month');
const [loading, setLoading] = useState(true)
const [amounts, setAmounts] = useState([0, 0])
const [invoiceKinds, setInvoiceKinds] = useState<any>([])
const [departmentPieData, setDepartmentPieData] = useState<any>([])
const [departureNames, setDepartureNames] = useState<any>([])
const [departureValues, setDepartureValues] = useState<any>([])
const [destinationNames, setDestinationNames] = useState<any>([])
const [destinationValues, setDestinationValues] = useState<any>([])
useEffect(() => {
setAmounts([120, 43])
setInvoiceKinds([{value: 1048, name: '增值税发票'},
{value: 735, name: '火车票'},
{value: 580, name: '机票行程单'},
{value: 484, name: '通用机打发票'},
{value: 300, name: '过路过桥费发票'}])
setDepartmentPieData([{value: 1048, name: '钝角部'},
{value: 735, name: '投影立体角部'},
{value: 580, name: '财务部'},
{value: 484, name: '采购部'},
{value: 300, name: '销售部'}])
setDepartureNames(['北京', '上海', '广州', '深圳', '成都'])
setDepartureValues([100,80,70,60,50])
setDestinationNames(['北京', '上海', '广州', '深圳', '成都'])
setDestinationValues([100,80,70,60,50])
setLoading(false)
}, []);
return (
<div></div>
<div>
<div style={{
height: 72,
padding: '30px',
backgroundColor: colorBgContainer,
display: "flex",
flexDirection: "row",
alignItems: "center"
}}>
<Space>
<Select value={type} onChange={setType}>
<Option value="month"></Option>
<Option value="year"></Option>
</Select>
<DatePicker picker={type} onChange={(value) => console.log(value)}/>
</Space>
</div>
{loading ?
<div></div> :
<div>
<div style={{
width: '100%',
padding: '30px 30px 0px 30px',
display: "flex",
flexDirection: "row",
flexWrap: "wrap"
}}>
<div style={{flex: 1, flexBasis: 400, display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
<Card style={{flex: 1, flexBasis: 200, margin: 10}}>
<Statistic title="报销金额" value={1128.45} precision={2}
prefix={<IconFont type={'icon-renminbi'}/>}/>
</Card>
<Card style={{flex: 1, flexBasis: 200, margin: 10}}>
<Statistic
title={type === 'month' ? "较上个月" : '较去年'}
value={11.28}
precision={2}
valueStyle={{color: '#3f8600'}}
prefix={<ArrowUpOutlined/>}
suffix="%"
/>
</Card>
</div>
<div style={{flex: 1, flexBasis: 400, display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
<Card style={{flex: 1, flexBasis: 200, margin: 10}}>
<Statistic title="补贴金额" value={1128.45} precision={2}
prefix={<IconFont type={'icon-renminbi'}/>}/>
</Card>
<Card style={{flex: 1, flexBasis: 200, margin: 10}}>
<Statistic
title={type === 'month' ? "较上个月" : '较去年'}
value={11.28}
precision={2}
valueStyle={{color: '#3f8600'}}
prefix={<ArrowUpOutlined/>}
suffix="%"
/>
</Card>
</div>
</div>
<div style={{
width: '100%',
padding: '0 30px 0 30px',
display: "flex",
flexDirection: "row",
flexWrap: "wrap"
}}>
<Card style={{flex: 1, flexBasis: 300, margin: 10, minWidth: 0, minHeight: 0}}>
<ReactECharts
option={{
color: [
'#6395f9',
'#62daab',
],
title: {
text: '发票与报销单新增情况',
left: 'center'
},
tooltip: {
trigger: 'item'
},
xAxis: {
axisLine: {
show: false
},
axisTick: {
alignWithLabel: true
},
type: 'category',
data: ['发票', '报销单'],
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: amounts,
colorBy: 'data',
barWidth: '80px',
itemStyle: {
borderRadius: [10, 20, 40, 40]
}
}
],
grid: {
bottom: '20px'
}
}}
notMerge={true}
lazyUpdate={true}
/>
</Card>
<Card style={{flex: 1, flexBasis: 300, margin: 10, minWidth: 0, minHeight: 0}}>
<ReactECharts
option={{
title: {
text: '发票类型',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
bottom: '0px',
left: 'center'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: invoiceKinds
}
]
}}
notMerge={true}
lazyUpdate={true}
/>
</Card>
<Card style={{flex: 1, flexBasis: 300, margin: 10, minWidth: 0, minHeight: 0}}>
<ReactECharts
option={{
title: {
text: '各部门报销金额',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
bottom: '0px',
left: 'center'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: departmentPieData
}
]
}}
notMerge={true}
lazyUpdate={true}
/>
</Card>
</div>
<div style={{
width: '100%',
padding: '0px 30px 0px 30px',
display: "flex",
flexDirection: "row",
flexWrap: "wrap"
}}>
<div style={{flex: 2, flexBasis: 600, display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
<Card style={{flex: 1, flexBasis: 600, margin: 10, minWidth: 0, minHeight: 0}}>
<ReactECharts style={{height: 600}} option={{
title: {
text: '差旅流向图',
left: 'center',
},
series: [
{
type: 'map',
map: 'china',
emphasis: {
disabled: true
},
select: {
disabled: true
}
}
]
}} notMerge={true}
lazyUpdate={true}/>
</Card>
</div>
<div style={{flex: 1, flexBasis: 300, display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
<Card style={{flex: 1, flexBasis: 300, margin: 10, minWidth: 0, minHeight: 0}}>
<HorizontalBarChart title={'出发地'} values={departureValues} labels={departureNames}/>
</Card>
<Card style={{flex: 1, flexBasis: 300, margin: 10, minWidth: 0, minHeight: 0}}>
<HorizontalBarChart title={'目的地'} values={destinationValues} labels={destinationNames}/>
</Card>
</div>
</div>
<Card style={{margin: '10px 40px 40px 40px', minWidth: 0, minHeight: 0}}>
<ReactECharts option={{
title: {
text: '各部门报销金额',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
type: 'scroll',
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
top: 40
},
grid: {
top: 80,
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}}
notMerge={true}
lazyUpdate={true}/>
</Card>
</div>
}
</div>
)
}
export default StatView