<template>
	<div class="screen-body">
		<div class="top-title">
			<div class="top-search">
				{{$i18n.locale === 'zh-CN'?'实际周':'Practical week'}}
				:
				<el-date-picker popper-class="screen-date-picker" v-model="currentWeek" type="week" format="yyyy 年 WW 周"
					placeholder="选择开始周" style="margin-right: 10px;" @change="geSntWeek()">
				</el-date-picker>
				{{$i18n.locale === 'zh-CN'?'计划周':'Planning week'}}:
				<el-date-picker popper-class="screen-date-picker" v-model="startWeek" type="week" format="yyyy 年 WW 周"
					placeholder="选择开始周" @change="geSntWeek()">
				</el-date-picker> -
				<el-date-picker popper-class="screen-date-picker" v-model="endWeek" type="week" format="yyyy 年 WW 周"
					placeholder="选择结束周" @change="geSntWeek()">
				</el-date-picker>
			</div>
		</div>
		<div class="screen-body-col col-top">
			<div class="echart">
				<div class="side-echarts">
					<div class="side-untitle">
						<img src="~@/assets/img/fund-icon.png" />
						<span>

							{{$i18n.locale === 'zh-CN'?'SG集团13周资金计划':'SG Group 13-week funding plan'}}(KEUR)
						</span>
					</div>
					<div id="groupChart" class="full2" refs=""></div>
				</div>

				<div class="side-echarts">
					<div class="side-title">
						<img src="~@/assets/img/fund-icon.png" />
						<span @click="toSuPage(1,$i18n.locale === 'zh-CN'?'资金池公司13周资金计划':`Capital Pool's 13-week funding plan`)">
							{{$i18n.locale === 'zh-CN'?'资金池公司13周资金计划':"Capital Pool's 13-week funding plan"}}(KEUR)
						</span>
					</div>
					<div id="poolChart" class="full2" refs=""></div>
				</div>

			</div>
		</div>
		<div class="screen-body-col col-top">
			<div class="echart">
				<div class="side-echarts">
					<div class="side-title">
						<img src="~@/assets/img/fund-icon.png" />
						<span @click="toSuPage(2,$i18n.locale === 'zh-CN'?'非资金池13周资金计划':'Non-pooled 13-week funding plan')">
							{{$i18n.locale === 'zh-CN'?'非资金池13周资金计划':'Non-pooled 13-week funding plan'}}(KEUR)
						</span>
					</div>
					<div id="companyChart" class="full2" refs=""></div>
				</div>
				<div class="side-echarts">
					<div class="side-title">
						<img src="~@/assets/img/fund-icon.png" />
						<span @click="toSuPage(2,$i18n.locale === 'zh-CN'?'中国区公司13周资金计划':'China company 13-week capital plan')">
							{{$i18n.locale === 'zh-CN'?'中国区公司13周资金计划':'China company 13-week capital plan'}}(KEUR)
						</span>
					</div>
					<div id="chinaCompanyChart" class="full2" refs=""></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import * as echarts from 'echarts'
	import moment from "moment"
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import humanResourceTheme from '@/api/bigScrenn/humanResourceTheme.js'
	import fundTheme from '@/api/bigScrenn/fundTheme.js'
	import screenHeader from '@/views/BigScrenn/components/screenHeader.vue'
	import echartsTitle from '@/views/BigScrenn/fundTheme/components/echartsTitle.vue'
	export default {
		components: {
			screenHeader
		},
		data() {
			return {
				currentKey: 'fundTheme',
				poolData: {
					week: '',
					year: '',
					planWeeks: [],
					enterpriseCode: ''
				}, //资金池公司银行实时余额
				currentWeek: '', //当前周
				startWeek: '',
				endWeek: '',
				poolCode: '', // 资金池公司
				groupCode: '', //集团银行
				companyCode: '', //企业银行
				chinaCompanyCode: '', //中国区公司银行
				//SG-各子公司季度趋势
				companyQuarterData: {
					startYear: '',
					endYear: '',
					enterpriseCode: '',
					year: '',
					startQuarter: '1',
					endQuarter: '4'
				},
				tabActive: 0,
				oneActive: 0,
				twoActive: 0,
				companyQuarterCode: '',
				//SG内保外贷季度趋势
				cqltSgQuarterData: {
					startYear: '',
					endYear: '',
					enterpriseCode: '',
					year: '',
					startQuarter: '1',
					endQuarter: '4'
				},
				cqltSgQuarterCode: '',
				//自主融资季度趋势
				sgQuarterData: {
					startYear: '',
					endYear: '',
					enterpriseCode: '',
					year: '',
					startQuarter: '1',
					endQuarter: '4'
				},
				sgQuarterCode: '',
				quarteList: [{
					value: '1',
					label: '第一季度'
				}, {
					value: '2',
					label: '第二季度'
				}, {
					value: '3',
					label: '第三季度'
				}, {
					value: '4',
					label: '第四季度'
				}],
				propsData: {
					children: 'list',
					label: 'name',
					value: 'code'
				},


				options: [], //企业
				value: '',
				params: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
					querys: []
				},
				onePoolList: [],
				twoPoolList: [],
				threePoolList: [],
				fourPoolList: [],
				allList: [],
				zbList: [],
				contentTab: [{
					name: '年度趋势',
					valu: 'year'
				}, {
					name: '月度趋势',
					valu: 'month'
				}]
			}
		},
		created() {
			console.log(1);
			window.localStorage.setItem('activeIndex', this.currentKey);
			window.localStorage.setItem("pageName", '资金主题');
			if (window.localStorage.getItem("startWeek") || window.localStorage.getItem("endWeek") || window.localStorage
				.getItem("currentWeek")) {
				this.startWeek = window.localStorage.getItem("startWeek")
				this.endWeek = window.localStorage.getItem("endWeek")
				this.currentWeek = window.localStorage.getItem("currentWeek")
				this.geSntWeek()


			} else {
				this.poolData.year = moment().format('YYYY')
				this.poolData.week = this.getWeek()
				this.companyQuarterData.year = moment().format('YYYY')
				this.companyQuarterData.startYear = moment().subtract(5, 'year').format('YYYY')
				this.companyQuarterData.endYear = moment().format('YYYY')
				this.cqltSgQuarterData.year = moment().format('YYYY')
				this.cqltSgQuarterData.startYear = moment().subtract(5, 'year').format('YYYY')
				this.cqltSgQuarterData.endYear = moment().format('YYYY')
				this.sgQuarterData.year = moment().format('YYYY')
				this.sgQuarterData.startYear = moment().subtract(5, 'year').format('YYYY')
				this.sgQuarterData.endYear = moment().format('YYYY')
				this.startWeek = new Date(
					new Date().getTime() - 30 * 24 * 60 * 60 * 1000
				)
				this.endWeek = new Date()
				this.currentWeek = new Date()
				this.getWeekRange()
				this.getPoolData()
				this.getGroupData()
				this.getPlanData()
				this.getChinaCompanyData()
			}






			this.zbList = dictUtils.getDictItemsFromCache('zb_en')
		},
		mounted() {
			this.$nextTick(() => {})
		},
		methods: {
			//跳转下级
			toSuPage(val, name) {
				window.localStorage.setItem("startWeek", this.startWeek);
				window.localStorage.setItem("endWeek", this.endWeek);
				window.localStorage.setItem("currentWeek", this.currentWeek);
				this.$router.push({
					name: 'weeklyfundSuPage',
					params: {
						type: val,
						name: name

					}
				})
			},
			//获取当前周
			getWeek() {
				var beginDate = new Date(new Date().getFullYear(), 0, 1);
				//星期从0-6,0代表星期天，6代表星期六
				var endWeek = new Date().getDay();
				if (endWeek == 0) endWeek = 7;
				var beginWeek = beginDate.getDay();
				if (beginWeek == 0) beginWeek = 7;
				//计算两个日期的天数差
				var millisDiff = new Date().getTime() - beginDate.getTime();
				var dayDiff = Math.floor((millisDiff + (beginWeek - endWeek) * (24 * 60 * 60 * 1000)) / 86400000);
				return Math.ceil(dayDiff / 7);
			},
			//初始周范围
			getWeekRange() {
				this.poolData.planWeeks = []
				let arr = []
				for (let i = 0; i < 6; i++) {
					arr.push(this.poolData.week - i)
				}
				this.poolData.planWeeks = arr.sort()

			},
			geSntWeek() {
				let startWeek = ''
				let endWeek = ''
				if (this.startWeek) {
					this.poolData.startYear = moment(this.startWeek).utcOffset(480).format("YYYY")
					startWeek = moment(this.startWeek).utcOffset(480).format("W")
				}
				if (this.endWeek) {
					this.poolData.endYear = moment(this.endWeek).utcOffset(480).format("YYYY")
					endWeek = moment(this.endWeek).utcOffset(480).format("W")
				}
				if (this.currentWeek) {
					this.poolData.year = moment(this.endWeek).utcOffset(480).format("YYYY")
					this.poolData.week = moment(this.currentWeek).utcOffset(480).format("W")
				}
				if (startWeek && endWeek) {
					if (this.poolData.startYear == this.poolData.endYear) {
						let arr = []
						for (let i = 0; i < endWeek - startWeek + 1; i++) {
							arr.push(endWeek - i)
						}
						this.poolData.planWeeks = arr.sort()
					}
				} else {
					if (this.poolData.endYear - this.poolData.startYear > 0) {
						let weekNum = Math.ceil(Math.abs(this.endWeek - this.startWeek) / 1000 / 60 / 60 / 24 / 7)
						weekNum
					}
				}
				window.localStorage.setItem("startWeek", this.startWeek);
				window.localStorage.setItem("endWeek", this.endWeek);
				window.localStorage.setItem("currentWeek", this.currentWeek);
				this.getPoolData()
				this.getGroupData()
				this.getPlanData()
				this.getChinaCompanyData()
			},
			checkTab(val, index) {
				switch (val) {
					case 0:
						this.tabActive = index
						this.getcompany()
						break;
					case 1:
						this.oneActive = index
						this.getcqltSg()
						break;
					case 2:
						this.twoActive = index
						this.getSg()
						break;
				}
			},
			//获取企业
			getAreaTree(val) {
				let poolType = val == 'one' ? 0 : val == 'three' ? 1 : val == 'four' ? 2 : ''
				let params = JSON.parse(JSON.stringify(this.params))
				params.querys = [{
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "type_",
					relation: "AND",
					value: 1
				}, {
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "pool_type_",
					relation: "AND",
					value: poolType
				}, {
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "run_status_",
					relation: "AND",
					value: 1
				}]
				fundTheme.getAreaTree(params, res => {
					if (res) {
						res.value.forEach(e => {
							this.zbList.forEach(s => {
								if (e.continent == s.name) {
									e.code = s.value
								}
							})
						})
						switch (val) {
							case 'one':
								this.onePoolList = res.value
								this.poolCode = [res.value[0].code, res.value[0].list[0].code]
								this.getPoolData()
								break;
							case 'two':
								this.twoPoolList = res.value
								this.groupCode = [res.value[0].code, res.value[0].list[0].code]
								this.getGroupData()
								break;
							case 'three':
								this.threePoolList = res.value
								this.companyCode = [res.value[0].code, res.value[0].list[0].code]
								this.getPlanData()
								break;
							case 'four':
								this.fourPoolList = res.value
								this.chinaCompanyCode = [res.value[0].code, res.value[0].list[0].code]
								this.getChinaCompanyData()
								break;
							default:
						}
					}
				})
			},
			getcompany() {
				this.getCompanyYearData()
				this.getCompanyQuarterData()
			},
			getcqltSg() {
				this.getCqltSgYearData()
				this.getCqltSgQuarterData()
			},
			getSg() {
				this.getSgYearData()
				this.getSgQuarterData()
			},
			arraySort(property) {
				return function(a, b) {
					var value1 = a[property]
					var value2 = b[property]
					return value1 - value2
				}
			},
			//资金池公司银行实时余额
			getPoolData() {
				let params = JSON.parse(JSON.stringify(this.poolData))
				params.enterpriseCode = this.poolCode[1]
				fundTheme.poolPlanData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getPoolChart(res.value.length > 0 ? res.value : [])
						})
					}

				})
			},
			//企业银行实时余额
			getPlanData() {
				let params = JSON.parse(JSON.stringify(this.poolData))
				params.enterpriseCode = this.companyCode[1]
				fundTheme.companyPlanData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getPlanChart(res.value.length > 0 ? res.value : [])
						})
					}

				})
			},
			//集团银行实时余额
			getGroupData() {
				let params = JSON.parse(JSON.stringify(this.poolData))
				params.enterpriseCode = this.groupCode[1]
				fundTheme.groupPlanData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getGroupChart(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},
			//中国区公司银行实时余额
			getChinaCompanyData() {
				let params = JSON.parse(JSON.stringify(this.poolData))
				params.enterpriseCode = this.chinaCompanyCode[1]
				fundTheme.chinaCompanyData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getChinaCompanyDataChart(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},
			//各子公司年度趋势
			getCompanyYearData() {
				let params = JSON.parse(JSON.stringify(this.companyQuarterData))
				params.enterpriseCode = this.companyQuarterCode[1]
				delete params.startQuarter
				delete params.endQuarter
				delete params.year
				fundTheme.companyYearData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getCompanyYearChart(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},
			//SG-各子公司季度趋势
			getCompanyQuarterData() {
				let params = JSON.parse(JSON.stringify(this.companyQuarterData))
				params.enterpriseCode = this.companyQuarterCode[1]
				delete params.startYear
				delete params.endYear
				fundTheme.companyQuarterData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getCompanyQuarterChart(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},
			//CQLT-SG内保外贷年度趋势
			getCqltSgYearData() {
				let params = JSON.parse(JSON.stringify(this.cqltSgQuarterData))
				params.enterpriseCode = this.cqltSgQuarterCode[1]
				delete params.startQuarter
				delete params.endQuarter
				delete params.year
				fundTheme.cqltSgYearData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getCqltSgYearChart(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},
			//CQLT-SG内保外贷季度趋势
			getCqltSgQuarterData() {
				let params = JSON.parse(JSON.stringify(this.cqltSgQuarterData))
				params.enterpriseCode = this.cqltSgQuarterCode[1]
				delete params.startYear
				delete params.endYear
				fundTheme.cqltSgQuarterData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getCqltSgQuarterChart(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},
			//SG自主融资年度趋势
			getSgYearData() {
				let params = JSON.parse(JSON.stringify(this.sgQuarterData))
				params.enterpriseCode = this.sgQuarterCode[1]
				delete params.startQuarter
				delete params.endQuarter
				delete params.year
				fundTheme.sgYearData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getSgYearChart(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},
			//SG自主融资季度趋势
			getSgQuarterData() {
				let params = JSON.parse(JSON.stringify(this.sgQuarterData))
				params.enterpriseCode = this.sgQuarterCode[1]
				delete params.startYear
				delete params.endYear
				fundTheme.sgQuarterData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getSgQuarterChart(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},

			getPoolChart(val) {
				let chartDom = echarts.init(document.getElementById('poolChart'))
				let xLabel = []
				let actual = []
				let budget = []
				let warnValue = []
				val.forEach(e => {
					xLabel.push(e.week + (this.$i18n.locale === 'zh-CN' ? '周' : ' Week'))
					actual.push(e.actual)
					budget.push(e.budget)
					warnValue.push(e.warnValue)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '6%',
						right: '4%',
						bottom: '7%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: 'KEUR',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];
							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true
					}, ],
					series: [{
						name: this.$i18n.locale === 'zh-CN' ? '实际余额' : 'Actual balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},
						},
						symbolSize: 8, //设定实心点的大小
						data: actual
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '计划余额' : 'Planned balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},
						},
						symbolSize: 8, //设定实心点的大小
						data: budget
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '阈值' : 'Threshold value',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: warnValue
					}]
				}
				option && chartDom.setOption(option)
			},
			getGroupChart(val) {
				let chartDom = echarts.init(document.getElementById('groupChart'))
				let xLabel = []
				let actual = []
				let budget = []
				let warnValue = []
				val.forEach(e => {
					xLabel.push(e.week+ (this.$i18n.locale === 'zh-CN' ? '周' : ' Week'))
					actual.push(e.actual)
					budget.push(e.budget)
					warnValue.push(e.warnValue)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '6%',
						right: '4%',
						bottom: '7%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: 'KEUR',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							// formatter: function(params) {
							// 	const units = ['', '万', '百万', '亿', '万亿'];
							// 	let unitIndex = 0;
							// 	if (params < 0) {
							// 		params = Math.abs(params)
							// 		while (params >= 10000 && unitIndex < units.length - 1) {
							// 			params /= 10000;
							// 			unitIndex++;
							// 		}
							// 		params = (0 - params)

							// 	} else {
							// 		while (params >= 10000 && unitIndex < units.length - 1) {
							// 			params /= 10000;
							// 			unitIndex++;
							// 		}

							// 	}
							// 	const formattedNumber = params

							// 	return formattedNumber + units[unitIndex];
							// },
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: this.$i18n.locale === 'zh-CN' ? '实际余额' : 'Actual balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: actual
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '计划余额' : 'Planned balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: budget
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '阈值' : 'Threshold value',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: warnValue
					}]
				}
				option && chartDom.setOption(option)

			},
			getPlanChart(val) {
				console.log(val);
				let chartDom = echarts.init(document.getElementById('companyChart'))
				let xLabel = []
				let actual = []
				let budget = []
				let warnValue = []
				val.forEach(e => {
					xLabel.push(e.week+ (this.$i18n.locale === 'zh-CN' ? '周' : ' Week'))
					actual.push(e.actual)
					budget.push(e.budget)
					warnValue.push(e.warnValue)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '6%',
						right: '4%',
						bottom: '7%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: 'KEUR',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							// formatter: function(params) {
							// 	const units = ['', '万', '百万', '亿', '万亿'];
							// 	let unitIndex = 0;
							// 	if (params < 0) {
							// 		params = Math.abs(params)
							// 		while (params >= 10000 && unitIndex < units.length - 1) {
							// 			params /= 10000;
							// 			unitIndex++;
							// 		}
							// 		params = (0 - params)

							// 	} else {
							// 		while (params >= 10000 && unitIndex < units.length - 1) {
							// 			params /= 10000;
							// 			unitIndex++;
							// 		}

							// 	}
							// 	const formattedNumber = params

							// 	return formattedNumber + units[unitIndex];
							// },
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: this.$i18n.locale === 'zh-CN' ? '实际余额' : 'Actual balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: actual
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '计划余额' : 'Planned balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: budget
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '阈值' : 'Threshold value',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: warnValue
					}]
				}
				option && chartDom.setOption(option)

			},
			getChinaCompanyDataChart(val) {
				let chartDom = echarts.init(document.getElementById('chinaCompanyChart'))
				let xLabel = []
				let actual = []
				let budget = []
				let warnValue = []
				val.forEach(e => {
					xLabel.push(e.week+ (this.$i18n.locale === 'zh-CN' ? '周' : ' Week'))
					actual.push(e.actual)
					budget.push(e.budget)
					warnValue.push(e.warnValue)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '6%',
						right: '4%',
						bottom: '7%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: 'KEUR',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];
							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: this.$i18n.locale === 'zh-CN' ? '实际余额' : 'Actual balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: actual
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '计划余额' : 'Planned balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: budget
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '阈值' : 'Threshold value',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: warnValue
					}]
				}
				option && chartDom.setOption(option)

			},

			getCompanyYearChart(val) {
				let chartDom = echarts.init(document.getElementById('companyYearDataChart'))
				let xLabel = []
				let financingCount = []
				let financingMoney = []
				val.forEach(e => {
					xLabel.push(e.year)
					financingCount.push(e.financingCount)
					financingMoney.push(e.financingMoney)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '14%',
						right: '5%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '欧元',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];
							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: '融资数量',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: financingCount
					}, {
						name: '融资总额(欧元)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: financingMoney
					}]
				}
				option && chartDom.setOption(option)

			},
			getCompanyQuarterChart(val) {
				let chartDom = echarts.init(document.getElementById('companyQuarterChart'))
				let xLabel = []
				let financingCount = []
				let financingMoney = []
				val.forEach(e => {
					xLabel.push(e.year)
					financingCount.push(e.financingCount)
					financingMoney.push(e.financingMoney)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '14%',
						right: '5%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '欧元',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];
							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: '融资数量',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: financingCount
					}, {
						name: '融资总额(欧元)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: financingMoney
					}]
				}
				option && chartDom.setOption(option)

			},
			getCqltSgYearChart(val) {
				let chartDom = echarts.init(document.getElementById('cqltSgYearChart'))
				let xLabel = []
				let cqltGuarantee = []
				let eurMoney = []
				let cnyMoney = []
				val.forEach(e => {
					xLabel.push(e.year)
					cqltGuarantee.push(e.cqltGuarantee)
					eurMoney.push(e.eurMoney)
					cnyMoney.push(e.cnyMoney)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '14%',
						right: '5%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '欧元',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];
							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: '担保总额',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: cqltGuarantee
					}, {
						name: '贷款总额(欧元)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: eurMoney
					}, {
						name: '贷款总额(人名币)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: cnyMoney
					}]
				}
				option && chartDom.setOption(option)

			},
			getCqltSgQuarterChart(val) {
				let chartDom = echarts.init(document.getElementById('cqltSgQuarterChart'))
				let xLabel = []
				let cqltGuarantee = []
				let eurMoney = []
				let cnyMoney = []
				val.forEach(e => {
					xLabel.push(e.year)
					cqltGuarantee.push(e.cqltGuarantee)
					eurMoney.push(e.eurMoney)
					cnyMoney.push(e.cnyMoney)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '14%',
						right: '5%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '欧元',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];
							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: '担保总额',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: cqltGuarantee
					}, {
						name: '贷款总额(欧元)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: eurMoney
					}, {
						name: '贷款总额(人名币)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: cnyMoney
					}]
				}
				option && chartDom.setOption(option)
			},
			getSgYearChart(val) {
				let chartDom = echarts.init(document.getElementById('sgYearChart'))
				let xLabel = []
				let eurMoney = []
				let cnyMoney = []
				val.forEach(e => {
					xLabel.push(e.year)
					eurMoney.push(e.eurMoney)
					cnyMoney.push(e.cnyMoney)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '14%',
						right: '5%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '欧元',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];
							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: '贷款总额(欧元)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: eurMoney
					}, {
						name: '贷款总额(人名币)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: cnyMoney
					}]
				}
				option && chartDom.setOption(option)
			},
			getSgQuarterChart(val) {
				let chartDom = echarts.init(document.getElementById('sgQuarterChart'))
				let xLabel = []
				let eurMoney = []
				let cnyMoney = []
				val.forEach(e => {
					xLabel.push(e.year)
					eurMoney.push(e.eurMoney)
					cnyMoney.push(e.cnyMoney)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '14%',
						right: '5%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '欧元',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];
							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: '贷款总额(欧元)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: eurMoney
					}, {
						name: '贷款总额(人名币)',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: cnyMoney
					}]
				}
				option && chartDom.setOption(option)
			}
		}
	}
</script>
<style lang="scss" scoped>
	@font-face {
		font-family: 'YouSheBiaoTiHei';
		src: url(~@/assets/fonts/YouSheBiaoTiHei-2.ttf);
	}

	@keyframes rotateImage {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	@keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	@-webkit-keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	.full {
		margin-top: 10px;
		height: calc(100% - 60px);
	}

	.full2 {
		margin-top: 5px;
		height: calc(100% - 45px);
	}

	.tab {
		width: 550px;
		height: 56px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.item {
			width: 134px;
			height: 40px;
			line-height: 40px;
			border-radius: 10px;
			background: linear-gradient(180deg, rgba(27, 154, 182, 1) 0%, rgba(18, 89, 132, 1) 100%);

			color: #fff;
			font-size: 16px;
			text-align: center;

		}

		.item-active {
			width: 134px;
			height: 40px;
			line-height: 40px;
			border-radius: 10px;
			background: linear-gradient(180deg, rgba(230, 129, 83, 1) 0%, rgba(74, 47, 31, 1) 100%);
			color: #fff;
			font-size: 16px;
			text-align: center;
		}
	}

	.top-title {
		display: flex;
		justify-content: space-between;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #FFFFFF;
		padding-left: 50px;
		box-sizing: border-box;
		line-height: 34px;
		height: 40px;
		// background: url('~@/assets/img/fund-big-title.png') center / 100% 100% no-repeat;
		position: relative;

		.top-search {
			width: 70%;
			text-align: right;
			position: absolute;
			font-size: 16px;
			bottom: 2px;
			right: 0;
		}

	}

	.screen-body {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: calc(100% - 108px);


		.screen-body-col {
			width: 100%;
		}

		.col-top {
			height: 49%;
			// background-color: rgba(12, 38, 61, .5);
			padding: 0 10px;
			box-sizing: border-box;


			.echart {
				// height: calc(100% - 45px);
				height: 100%;
				display: flex;
				justify-content: space-between;

				.side-echarts {
					position: relative;
					width: 49.7%;
					height: 97%;
					padding: 10px 20px;
					box-sizing: border-box;
					background: url('~@/assets/img/fund-echart-bg.png') center / 100% 100% no-repeat;

					.side-title {
						font-size: 20px !important;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						font-style: italic;
						color: #cfdfec;
						cursor: pointer;

						span {
							font-size: 20px;
						}
					}

					.side-untitle {
						font-size: 20px !important;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						font-style: italic;
						color: #cfdfec;

						span {
							font-size: 20px;
						}
					}

					.side-title:hover {
						color: #02F5F2 !important;
					}

					.two-title {

						height: 18px;
						margin: 10px 0 5px;
						background: url('~@/assets/img/fund-twotitle.png') center / 100% 100% no-repeat;
						position: relative;

						.two-name {
							position: absolute;
							top: -15px;
							left: 15px;
							font-size: 18px;
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							color: #E6EDF8;
							line-height: 32px;
						}
					}

					.search {
						padding: 0 20px;
						box-sizing: border-box;
						color: #FFFFFF;
						background: url('~@/assets/img/fund-search-bg.png') center / 100% 100% no-repeat;

					}
				}
			}
		}

		.col-footer {
			height: 49%;
			display: flex;
			padding: 0 10px;
			box-sizing: border-box;
			justify-content: space-between;

			.footer-side {
				height: 100%;
				width: 32.5%;
				// background-color: rgba(12, 38, 61, .4);
				// padding: 10px 20px;
				box-sizing: border-box;
				position: relative;

				.top-title {
					display: flex;
					justify-content: space-between;
					font-size: 22px;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34px;
					padding-left: 50px;
					box-sizing: border-box;
					height: 48px;
					background: url('~@/assets/img/fund-title.png') center / 100% 100% no-repeat;
					position: relative;


				}

				.search {
					font-size: 14px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					bottom: -5px;
					right: 0;
				}

				.top-content {
					height: calc(100% - 48px);
					padding: 10px 20px;
					box-sizing: border-box;
					background: url('~@/assets/img/fund-echart-bg.png') center / 100% 100% no-repeat;

					.side-title {
						font-size: 20px;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						font-style: italic;
						color: #AEC3DC;
					}

					.side-title:hover {
						color: #02F5F2;
					}

					.two-title {

						height: 18px;
						margin: 10px 0 5px;
						background: url('~@/assets/img/fund-twotitle.png') center / 100% 100% no-repeat;
						position: relative;

						.two-name {
							position: absolute;
							top: -15px;
							left: 15px;
							font-size: 18px;
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							color: #E6EDF8;
							line-height: 32px;
						}
					}

					.search {
						padding: 0 20px;
						box-sizing: border-box;
						color: #FFFFFF;
						background: url('~@/assets/img/fund-search-bg.png') center / 100% 100% no-repeat;
						// .two-name{
						// 	font-size: 20px;
						// 	font-family: YouSheBiaoTiHei;
						// 	font-weight: 400;
						// 	font-style: italic;
						// 	color: #AEC3DC;
						// }
					}

					.echart {
						width: 100%;
						height: calc(100% - 100px);
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.side-echarts {
							width: 100%;
							height: 98%;
							background: url('~@/assets/img/fund-echart-bg.png') center / 100% 100% no-repeat;



						}
					}

					.content-tab {
						margin-top: 5px;
						height: 40px;
						display: flex;

						.ctab {
							width: 202px;
							height: 40px;
							line-height: 40px;
							text-align: center;
							font-size: 20px;
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							color: #ACBFE3;
							background: url('~@/assets/img/fund-tab.png') center / 100% 100% no-repeat;
						}

						.ctab-active {
							width: 202px;
							height: 40px;
							line-height: 40px;
							text-align: center;
							font-size: 20px;
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							color: #E5F0FF;
							background: url('~@/assets/img/fund-tab-active.png') center / 100% 100% no-repeat;
						}
					}
				}

				.footer-echarts {
					height: calc(100% - 40px);

					.time-search {
						height: 49px;
						padding: 5px;
						box-sizing: border-box;
						background: #051227;
						border: 1px solid #1F2B43;
						opacity: 0.8;
						font-size: 14px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						font-style: italic;
						color: #AEC3DC;
					}
				}



			}
		}


	}

	.breadcrumb {
		width: 100%;
		height: 45px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 30px;
		padding: 0 20px;
		box-sizing: border-box;
		color: #FFFFFF;
		display: flex;
		align-items: center;

		// border: 1px solid #fff;
		.left {
			height: 30px;
			display: flex;
			align-items: center;

			.crumb-item {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ADC9E9;
				margin-left: 5px;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb.png') center / 100% 100% no-repeat;
				transform: skew(-25deg);

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}

			.crumb-item:hover {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;
			}

			.crumb-item-active {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;
				transform: skew(-25deg);

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}
		}

	}

	.axis-tip {
		display: none;
		position: absolute;
		padding: 5px 5px;
		font-size: 12px;
		line-height: 18px;
		color: #575757;
		background: #ffffff;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
		border-radius: 4px;
	}

	//输入框

	/deep/ .el-input {
		height: 35px !important;
	}

	/deep/ .el-input__inner {
		height: 35px !important;
		color: #eee;
		border-color: #0F3662;
		background-color: rgba(1, 28, 82, 0.8);
	}

	/deep/ .search .el-input__inner {
		height: 35px !important;
		color: #eee;
		border: none;
		background-color: rgba(1, 28, 82, 0);
	}

	//聚焦时的样式
	.el-select .el-input.is-focus .el-input__inner {
		border-color: #0B61AA;
		background-color: rgba(1, 28, 82, 0.8);
		color: #00D3E9;
	}

	// //下拉框选中
	// .el-select-dropdown__item {
	// 	color: #eee;
	// }
	// .el-select-dropdown {
	// 	border: none;
	// 	background-color: rgba(1, 28, 82, 0.8) !important;
	// }
	// //鼠标经过下拉框
	// .el-select-dropdown__item.hover,
	// .el-select-dropdown__item:hover {
	// 	color: #00D3E9;
	// 	background-color: #0F3360;
	// }
</style>