From e51960aa517444072f361775c2e44aa8364fce01 Mon Sep 17 00:00:00 2001
From: qqGroup0 <253114712@qq.com>
Date: Fri, 31 Mar 2023 16:12:17 +0800
Subject: [PATCH] =?UTF-8?q?zqq:echart=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue | 1212 +++++++++++++++++++-------------------
 1 file changed, 622 insertions(+), 590 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 1b6ed86..b8ea48f 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,80 +1,111 @@
 <template>
-	<div class="home-container layout-pd">
-        <!-- 第一行 -->
-		<el-row :gutter="15" class="home-card-one mb15">
-			<el-col
-				:xs="24"
-				:sm="12"
-				:md="12"
-				:lg="6"
-				:xl="6"
-				v-for="(v, k) in state.homeOne"
-				:key="k"
-				:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
-			>
-				<div class="home-card-item flex">
-					<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
-						<div class="flex-auto">
-							<span class="font30">{{ v.num1 }}</span>
-							<span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span>
-							<div class="mt10">{{ v.num3 }}</div>
-						</div>
-						<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
-							<i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
-						</div>
-					</div>
-				</div>
-			</el-col>
-		</el-row>
-        <!-- 第二行 -->
-		<el-row :gutter="15" class="home-card-two mb15">
-            <!-- 后台响应须知 -->
-			<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
-				<div class="home-card-item">
-					<div class="home-card-item-title">Notes on Background Response</div>
-					<div class="home-monitor">
-						<div class="flex-warp">
-							更新日期：2023-03-31<br />
-							注意事项：<br />
-							~对用户申请进行严格审核<br />
-							~对用户提供灾害经纬度范围进行校正<br />
-							~如响应及时，社交媒体数据的Twitter数据直接实时获取即可<br />
-							~数据导出时需检查是否爬取完毕<br />
-							~如灾害发生期间没有遥感数据，在未来一段时间需及时查询更新<br />
-						</div>
-					</div>
-				</div>
-			</el-col>
-            <!-- 全年用户申请量统计 -->
-			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
-				<div class="home-card-item">
-					<div style="height: 100%" ref="homeBarRef"></div>
-				</div>
-			</el-col>
-		</el-row>
-        <!-- 第三行 -->
-		<el-row :gutter="15" class="home-card-three">
-            <!-- 灾害发生区域占比 饼图-->
-			<el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
-				<div class="home-card-item">
-					<div style="height: 100%" ref="homePieRef"></div>
-				</div>
-			</el-col>
-            <!-- 灾害响应月分布量变化 折线图 -->
-			<el-col :xs="24" :sm="14" :md="14" :lg="12" :xl="12" class="home-media">
-				<div class="home-card-item">
-					<div style="height: 100%" ref="homeLineRef"></div>
-				</div>
-			</el-col>
-            <!-- 灾害类型占比 -->
-            <el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
-				<div class="home-card-item">
-					<div style="height: 100%" ref="homePieRef2"></div>
-				</div>
-			</el-col>
+  <div class="home-container layout-pd">
+    <!-- 第一行 -->
+    <el-row :gutter="15"
+            class="home-card-one mb15">
+      <el-col :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="6"
+              :xl="6"
+              v-for="(v, k) in state.homeOne"
+              :key="k"
+              :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
+        <div class="home-card-item flex">
+          <div class="flex-margin flex w100"
+               :class="` home-one-animation${k}`">
+            <div class="flex-auto">
+              <span class="font30">{{ v.num1 }}</span>
+              <span class="ml5 font16"
+                    :style="{ color: v.color1 }">{{ v.num2 }}%</span>
+              <div class="mt10">{{ v.num3 }}</div>
+            </div>
+            <div class="home-card-item-icon flex"
+                 :style="{ background: `var(${v.color2})` }">
+              <i class="flex-margin font32"
+                 :class="v.num4"
+                 :style="{ color: `var(${v.color3})` }"></i>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 第二行 -->
+    <el-row :gutter="15"
+            class="home-card-two mb15">
+      <!-- 后台响应须知 -->
+      <el-col :xs="24"
+              :sm="10"
+              :md="10"
+              :lg="8"
+              :xl="8">
+        <div class="home-card-item">
+          <div class="home-card-item-title">Notes on Background Response</div>
+          <div class="home-monitor">
+            <div class="flex-warp">
+              更新日期：2023-03-31<br />
+              注意事项：<br />
+              ~对用户申请进行严格审核<br />
+              ~对用户提供灾害经纬度范围进行校正<br />
+              ~如响应及时，社交媒体数据的Twitter数据直接实时获取即可<br />
+              ~数据导出时需检查是否爬取完毕<br />
+              ~如灾害发生期间没有遥感数据，在未来一段时间需及时查询更新<br />
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <!-- 全年用户申请量统计 -->
+      <el-col :xs="24"
+              :sm="14"
+              :md="14"
+              :lg="16"
+              :xl="16">
+        <div class="home-card-item">
+          <div style="height: 100%"
+               ref="homeBarRef"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 第三行 -->
+    <el-row :gutter="15"
+            class="home-card-three">
+      <!-- 灾害发生区域占比 饼图-->
+      <el-col :xs="24"
+              :sm="10"
+              :md="10"
+              :lg="6"
+              :xl="6">
+        <div class="home-card-item">
+          <div style="height: 100%"
+               ref="homePieRef"></div>
+        </div>
+      </el-col>
+      <!-- 灾害响应月分布量变化 折线图 -->
+      <el-col :xs="24"
+              :sm="14"
+              :md="14"
+              :lg="12"
+              :xl="12"
+              class="home-media">
+        <div class="home-card-item">
+          <div style="height: 100%"
+               ref="homeLineRef"></div>
+        </div>
+      </el-col>
+      <!-- 灾害类型占比 -->
+      <el-col :xs="24"
+              :sm="10"
+              :md="10"
+              :lg="6"
+              :xl="6">
+        <div class="home-card-item">
+          <div style="height: 100%"
+               ref="homePieRef2"></div>
+        </div>
+      </el-col>
 
-		</el-row>
-	</div>
+    </el-row>
+  </div>
 </template>
 
 <script setup name="home">
@@ -94,552 +125,553 @@ const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 const state = reactive({
-	global: {
-		homeChartOne: null,
-		homeChartTwo: null,
-		homeCharThree: null,
-		dispose: [null, '', undefined],
-	},
-	homeOne: [
-		{
-			num1: '125,12',
-			num2: '-12.32',
-			num3: 'Number of Disaster Response Applications',
-			num4: 'fa fa-meetup',
-			color1: '#FF6462',
-			color2: '--next-color-primary-lighter',
-			color3: '--el-color-primary',
-		},
-		{
-			num1: '653,33',
-			num2: '+42.32',
-			num3: 'Actual times of disaster response',
-			num4: 'iconfont icon-ditu',
-			color1: '#6690F9',
-			color2: '--next-color-success-lighter',
-			color3: '--el-color-success',
-		},
-		{
-			num1: '125,65',
-			num2: '+17.32',
-			num3: 'User Visits',
-			num4: 'iconfont icon-zaosheng',
-			color1: '#6690F9',
-			color2: '--next-color-warning-lighter',
-			color3: '--el-color-warning',
-		},
-		{
-			num1: '520,43',
-			num2: '-10.01',
-			num3: 'Data downloads',
-			num4: 'fa fa-github-alt',
-			color1: '#FF6462',
-			color2: '--next-color-danger-lighter',
-			color3: '--el-color-danger',
-		},
-	],
-	homeThree: [
-		{
-			icon: 'iconfont icon-yangan',
-			label: '浅粉红',
-			value: '2.1%OBS/M',
-			iconColor: '#F72B3F',
-		},
-		{
-			icon: 'iconfont icon-wendu',
-			label: '深红(猩红)',
-			value: '30℃',
-			iconColor: '#91BFF8',
-		},
-		{
-			icon: 'iconfont icon-shidu',
-			label: '淡紫红',
-			value: '57%RH',
-			iconColor: '#88D565',
-		},
-		{
-			icon: 'iconfont icon-shidu',
-			label: '弱紫罗兰红',
-			value: '107w',
-			iconColor: '#88D565',
-		},
-		{
-			icon: 'iconfont icon-zaosheng',
-			label: '中紫罗兰红',
-			value: '57DB',
-			iconColor: '#FBD4A0',
-		},
-		{
-			icon: 'iconfont icon-zaosheng',
-			label: '紫罗兰',
-			value: '57PV',
-			iconColor: '#FBD4A0',
-		},
-		{
-			icon: 'iconfont icon-zaosheng',
-			label: '暗紫罗兰',
-			value: '517Cpd',
-			iconColor: '#FBD4A0',
-		},
-		{
-			icon: 'iconfont icon-zaosheng',
-			label: '幽灵白',
-			value: '12kg',
-			iconColor: '#FBD4A0',
-		},
-		{
-			icon: 'iconfont icon-zaosheng',
-			label: '海军蓝',
-			value: '64fm',
-			iconColor: '#FBD4A0',
-		},
-	],
-	myCharts: [],
-	charts: {
-		theme: '',
-		bgColor: '',
-		color: '#303133',
-	},
+  global: {
+    homeChartOne: null,
+    homeChartTwo: null,
+    homeCharThree: null,
+    homeChartFour: null,
+    dispose: [null, '', undefined],
+  },
+  homeOne: [
+    {
+      num1: '125,12',
+      num2: '-12.32',
+      num3: 'Number of Disaster Response Applications',
+      num4: 'fa fa-meetup',
+      color1: '#FF6462',
+      color2: '--next-color-primary-lighter',
+      color3: '--el-color-primary',
+    },
+    {
+      num1: '653,33',
+      num2: '+42.32',
+      num3: 'Actual times of disaster response',
+      num4: 'iconfont icon-ditu',
+      color1: '#6690F9',
+      color2: '--next-color-success-lighter',
+      color3: '--el-color-success',
+    },
+    {
+      num1: '125,65',
+      num2: '+17.32',
+      num3: 'User Visits',
+      num4: 'iconfont icon-zaosheng',
+      color1: '#6690F9',
+      color2: '--next-color-warning-lighter',
+      color3: '--el-color-warning',
+    },
+    {
+      num1: '520,43',
+      num2: '-10.01',
+      num3: 'Data downloads',
+      num4: 'fa fa-github-alt',
+      color1: '#FF6462',
+      color2: '--next-color-danger-lighter',
+      color3: '--el-color-danger',
+    },
+  ],
+  homeThree: [
+    {
+      icon: 'iconfont icon-yangan',
+      label: '浅粉红',
+      value: '2.1%OBS/M',
+      iconColor: '#F72B3F',
+    },
+    {
+      icon: 'iconfont icon-wendu',
+      label: '深红(猩红)',
+      value: '30℃',
+      iconColor: '#91BFF8',
+    },
+    {
+      icon: 'iconfont icon-shidu',
+      label: '淡紫红',
+      value: '57%RH',
+      iconColor: '#88D565',
+    },
+    {
+      icon: 'iconfont icon-shidu',
+      label: '弱紫罗兰红',
+      value: '107w',
+      iconColor: '#88D565',
+    },
+    {
+      icon: 'iconfont icon-zaosheng',
+      label: '中紫罗兰红',
+      value: '57DB',
+      iconColor: '#FBD4A0',
+    },
+    {
+      icon: 'iconfont icon-zaosheng',
+      label: '紫罗兰',
+      value: '57PV',
+      iconColor: '#FBD4A0',
+    },
+    {
+      icon: 'iconfont icon-zaosheng',
+      label: '暗紫罗兰',
+      value: '517Cpd',
+      iconColor: '#FBD4A0',
+    },
+    {
+      icon: 'iconfont icon-zaosheng',
+      label: '幽灵白',
+      value: '12kg',
+      iconColor: '#FBD4A0',
+    },
+    {
+      icon: 'iconfont icon-zaosheng',
+      label: '海军蓝',
+      value: '64fm',
+      iconColor: '#FBD4A0',
+    },
+  ],
+  myCharts: [],
+  charts: {
+    theme: '',
+    bgColor: '',
+    color: '#303133',
+  },
 });
 
 // 折线图
 const initLineChart = () => {
-	if (!state.global.dispose.some((b) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
-	state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
-	const option = {
-		backgroundColor: state.charts.bgColor,
-		title: {
-			text: 'Annual user application statistics',
-			x: 'left',
-			textStyle: { fontSize: '15', color: state.charts.color },
-		},
-		grid: { top: 70, right: 20, bottom: 30, left: 30 },
-		tooltip: { trigger: 'axis' },
-		legend: { data: ['预购队列', '最新成交价'], right: 0 },
-		xAxis: {
-			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-		},
-		yAxis: [
-			{
-				type: 'value',
-				name: '价格',
-				splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
-			},
-		],
-		series: [
-			{
-				name: '预购队列',
-				type: 'line',
-				symbolSize: 6,
-				symbol: 'circle',
-				smooth: true,
-				data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
-				lineStyle: { color: '#fe9a8b' },
-				itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: '#fe9a8bb3' },
-						{ offset: 1, color: '#fe9a8b03' },
-					]),
-				},
-			},
-			{
-				name: '最新成交价',
-				type: 'line',
-				symbolSize: 6,
-				symbol: 'circle',
-				smooth: true,
-				data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
-				lineStyle: { color: '#9E87FF' },
-				itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: '#9E87FFb3' },
-						{ offset: 1, color: '#9E87FF03' },
-					]),
-				},
-				emphasis: {
-					itemStyle: {
-						color: {
-							type: 'radial',
-							x: 0.5,
-							y: 0.5,
-							r: 0.5,
-							colorStops: [
-								{ offset: 0, color: '#9E87FF' },
-								{ offset: 0.4, color: '#9E87FF' },
-								{ offset: 0.5, color: '#fff' },
-								{ offset: 0.7, color: '#fff' },
-								{ offset: 0.8, color: '#fff' },
-								{ offset: 1, color: '#fff' },
-							],
-						},
-						borderColor: '#9E87FF',
-						borderWidth: 2,
-					},
-				},
-			},
-		],
-	};
-	state.global.homeChartOne.setOption(option);
-	state.myCharts.push(state.global.homeChartOne);
+  if (!state.global.dispose.some((b) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
+  state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
+  const option = {
+    backgroundColor: state.charts.bgColor,
+    title: {
+      text: 'Annual user application statistics',
+      x: 'left',
+      textStyle: { fontSize: '15', color: state.charts.color },
+    },
+    grid: { top: 70, right: 20, bottom: 30, left: 30 },
+    tooltip: { trigger: 'axis' },
+    legend: { data: ['预购队列', '最新成交价'], right: 0 },
+    xAxis: {
+      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '价格',
+        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+      },
+    ],
+    series: [
+      {
+        name: '预购队列',
+        type: 'line',
+        symbolSize: 6,
+        symbol: 'circle',
+        smooth: true,
+        data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
+        lineStyle: { color: '#fe9a8b' },
+        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#fe9a8bb3' },
+            { offset: 1, color: '#fe9a8b03' },
+          ]),
+        },
+      },
+      {
+        name: '最新成交价',
+        type: 'line',
+        symbolSize: 6,
+        symbol: 'circle',
+        smooth: true,
+        data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
+        lineStyle: { color: '#9E87FF' },
+        itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#9E87FFb3' },
+            { offset: 1, color: '#9E87FF03' },
+          ]),
+        },
+        emphasis: {
+          itemStyle: {
+            color: {
+              type: 'radial',
+              x: 0.5,
+              y: 0.5,
+              r: 0.5,
+              colorStops: [
+                { offset: 0, color: '#9E87FF' },
+                { offset: 0.4, color: '#9E87FF' },
+                { offset: 0.5, color: '#fff' },
+                { offset: 0.7, color: '#fff' },
+                { offset: 0.8, color: '#fff' },
+                { offset: 1, color: '#fff' },
+              ],
+            },
+            borderColor: '#9E87FF',
+            borderWidth: 2,
+          },
+        },
+      },
+    ],
+  };
+  state.global.homeChartOne.setOption(option);
+  state.myCharts.push(state.global.homeChartOne);
 };
 //homePieRef 灾害发生区域占比 饼图
 const initPieChart = () => {
-	if (!state.global.dispose.some((b) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
-	state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
-	var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
-	var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
-	var data = [];
-	for (var i = 0; i < getname.length; i++) {
-		data.push({ name: getname[i], value: getvalue[i] });
-	}
-	const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
-	const option = {
-		backgroundColor: state.charts.bgColor,
-		title: {
-			text: 'Proportion of Disaster Occurred Areas',
-			x: 'left',
-			textStyle: { fontSize: '15', color: state.charts.color },
-		},
-		tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
-		graphic: {
-			elements: [
-				{
-					type: 'image',
-					z: -1,
-					style: {
-						image: themeConfig.value.isIsDark,
-							
-							
-						width: 230,
-						height: 230,
-					},
-					left: '16.5%',
-					top: 'center',
-				},
-			],
-		},
-		legend: {
-			type: 'scroll',
-			orient: 'vertical',
-			right: '0%',
-			left: '65%',
-			top: 'center',
-			itemWidth: 14,
-			itemHeight: 14,
-			data: getname,
-			textStyle: {
-				rich: {
-					name: {
-						fontSize: 14,
-						fontWeight: 400,
-						width: 200,
-						height: 35,
-						padding: [0, 0, 0, 60],
-						color: state.charts.color,
-					},
-					rate: {
-						fontSize: 15,
-						fontWeight: 500,
-						height: 35,
-						width: 40,
-						padding: [0, 0, 0, 30],
-						color: state.charts.color,
-					},
-				},
-			},
-		},
-		series: [
-			{
-				type: 'pie',
-				radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
-				center: ['32%', '50%'],
-				itemStyle: {
-					color: function (params) {
-						return colorList[params.dataIndex];
-					},
-				},
-				label: { show: false },
-				labelLine: { show: false },
-				data: data,
-			},
-		],
-	};
-	state.global.homeChartTwo.setOption(option);
-	state.myCharts.push(state.global.homeChartTwo);
+  if (!state.global.dispose.some((b) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
+  state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
+  var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
+  var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
+  var data = [];
+  for (var i = 0; i < getname.length; i++) {
+    data.push({ name: getname[i], value: getvalue[i] });
+  }
+  const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
+  const option = {
+    backgroundColor: state.charts.bgColor,
+    title: {
+      text: 'Proportion of Disaster Occurred Areas',
+      x: 'left',
+      textStyle: { fontSize: '15', color: state.charts.color },
+    },
+    tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
+    graphic: {
+      elements: [
+        {
+          type: 'image',
+          z: -1,
+          style: {
+            image: themeConfig.value.isIsDark,
+
+
+            width: 230,
+            height: 230,
+          },
+          left: '16.5%',
+          top: 'center',
+        },
+      ],
+    },
+    // legend: {
+    //   type: 'scroll',
+    //   orient: 'vertical',
+    //   right: '0%',
+    //   left: '65%',
+    //   top: 'center',
+    //   itemWidth: 14,
+    //   itemHeight: 14,
+    //   data: getname,
+    //   textStyle: {
+    //     rich: {
+    //       name: {
+    //         fontSize: 14,
+    //         fontWeight: 400,
+    //         width: 200,
+    //         height: 35,
+    //         padding: [0, 0, 0, 60],
+    //         color: state.charts.color,
+    //       },
+    //       rate: {
+    //         fontSize: 15,
+    //         fontWeight: 500,
+    //         height: 35,
+    //         width: 40,
+    //         padding: [0, 0, 0, 30],
+    //         color: state.charts.color,
+    //       },
+    //     },
+    //   },
+    // },
+    series: [
+      {
+        type: 'pie',
+        radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
+        center: ['50%', '50%'],
+        itemStyle: {
+          color: function (params) {
+            return colorList[params.dataIndex];
+          },
+        },
+        label: { show: true },
+        labelLine: { show: true },
+        data: data,
+      },
+    ],
+  };
+  state.global.homeChartTwo.setOption(option);
+  state.myCharts.push(state.global.homeChartTwo);
 };
 //homePieRef2 灾害类型占比 饼图
 const initPieChart2 = () => {
-	if (!state.global.dispose.some((b) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
-	state.global.homeChartTwo = markRaw(echarts.init(homePieRef2.value, state.charts.theme));
-	var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
-	var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
-	var data = [];
-	for (var i = 0; i < getname.length; i++) {
-		data.push({ name: getname[i], value: getvalue[i] });
-	}
-	const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
-	const option = {
-		backgroundColor: state.charts.bgColor,
-		title: {
-			text: 'Proportion of Disaster Occurred Areas',
-			x: 'left',
-			textStyle: { fontSize: '15', color: state.charts.color },
-		},
-		tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
-		graphic: {
-			elements: [
-				{
-					type: 'image',
-					z: -1,
-					style: {
-						image: themeConfig.value.isIsDark,
-							
-							
-						width: 230,
-						height: 230,
-					},
-					left: '16.5%',
-					top: 'center',
-				},
-			],
-		},
-		legend: {
-			type: 'scroll',
-			orient: 'vertical',
-			right: '0%',
-			left: '65%',
-			top: 'center',
-			itemWidth: 14,
-			itemHeight: 14,
-			data: getname,
-			textStyle: {
-				rich: {
-					name: {
-						fontSize: 14,
-						fontWeight: 400,
-						width: 200,
-						height: 35,
-						padding: [0, 0, 0, 60],
-						color: state.charts.color,
-					},
-					rate: {
-						fontSize: 15,
-						fontWeight: 500,
-						height: 35,
-						width: 40,
-						padding: [0, 0, 0, 30],
-						color: state.charts.color,
-					},
-				},
-			},
-		},
-		series: [
-			{
-				type: 'pie',
-				radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
-				center: ['32%', '50%'],
-				itemStyle: {
-					color: function (params) {
-						return colorList[params.dataIndex];
-					},
-				},
-				label: { show: false },
-				labelLine: { show: false },
-				data: data,
-			},
-		],
-	};
-	state.global.homeChartTwo.setOption(option);
-	state.myCharts.push(state.global.homeChartTwo);
+  if (!state.global.dispose.some((b) => b === state.global.homeChartFour)) state.global.homeChartFour.dispose();
+  state.global.homeChartFour = markRaw(echarts.init(homePieRef2.value, state.charts.theme));
+  var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
+  var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
+  var data = [];
+  for (var i = 0; i < getname.length; i++) {
+    data.push({ name: getname[i], value: getvalue[i] });
+  }
+  const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
+  const option = {
+    backgroundColor: state.charts.bgColor,
+    title: {
+      text: 'Disaster Type Proportion',
+      x: 'left',
+      textStyle: { fontSize: '15', color: state.charts.color },
+    },
+    tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
+    graphic: {
+      elements: [
+        {
+          type: 'image',
+          z: -1,
+          style: {
+            image: themeConfig.value.isIsDark,
+
+
+            width: 230,
+            height: 230,
+          },
+          left: '16.5%',
+          top: 'center',
+        },
+      ],
+    },
+    // legend: {
+    //   type: 'scroll',
+    //   orient: 'vertical',
+    //   right: '0%',
+    //   left: '65%',
+    //   top: 'center',
+    //   itemWidth: 14,
+    //   itemHeight: 14,
+    //   data: getname,
+    //   textStyle: {
+    //     rich: {
+    //       name: {
+    //         fontSize: 14,
+    //         fontWeight: 400,
+    //         width: 200,
+    //         height: 35,
+    //         padding: [0, 0, 0, 60],
+    //         color: state.charts.color,
+    //       },
+    //       rate: {
+    //         fontSize: 15,
+    //         fontWeight: 500,
+    //         height: 35,
+    //         width: 40,
+    //         padding: [0, 0, 0, 30],
+    //         color: state.charts.color,
+    //       },
+    //     },
+    //   },
+    // },
+    series: [
+      {
+        type: 'pie',
+        radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
+        center: ['50%', '50%'],
+        itemStyle: {
+          color: function (params) {
+            return colorList[params.dataIndex];
+          },
+        },
+        label: { show: true },
+        labelLine: { show: true },
+        data: data,
+      },
+    ],
+  };
+  state.global.homeChartFour.setOption(option);
+  state.myCharts.push(state.global.homeChartFour);
 };
 // 柱状图
 const initBarChart = () => {
-	if (!state.global.dispose.some((b) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
-	state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
-	const option = {
-		backgroundColor: state.charts.bgColor,
-		title: {
-			text: 'Disaster response monthly distribution change',
-			x: 'left',
-			textStyle: { fontSize: '15', color: state.charts.color },
-		},
-		tooltip: { trigger: 'axis' },
-		legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 },
-		grid: { top: 70, right: 80, bottom: 30, left: 80 },
-		xAxis: [
-			{
-				type: 'category',
-				data: ['1km', '2km', '3km', '4km', '5km', '6km'],
-				boundaryGap: true,
-				axisTick: { show: false },
-			},
-		],
-		yAxis: [
-			{
-				name: '供回温度(℃）',
-				nameLocation: 'middle',
-				nameTextStyle: { padding: [3, 4, 50, 6] },
-				splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
-				axisLine: { show: false },
-				axisTick: { show: false },
-				axisLabel: { color: state.charts.color, formatter: '{value} ' },
-			},
-			{
-				name: '压力值(Mpa)',
-				nameLocation: 'middle',
-				nameTextStyle: { padding: [50, 4, 5, 6] },
-				splitLine: { show: false },
-				axisLine: { show: false },
-				axisTick: { show: false },
-				axisLabel: { color: state.charts.color, formatter: '{value} ' },
-			},
-		],
-		series: [
-			{
-				name: '供温',
-				type: 'line',
-				smooth: true,
-				showSymbol: true,
-				// 矢量画五角星
-				symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
-				symbolSize: 12,
-				yAxisIndex: 0,
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: 'rgba(250,180,101,0.3)' },
-						{ offset: 1, color: 'rgba(250,180,101,0)' },
-					]),
-					shadowColor: 'rgba(250,180,101,0.2)',
-					shadowBlur: 20,
-				},
-				itemStyle: { color: '#FF8000' },
-				// data中可以使用对象，value代表相应的值，另外可加入自定义的属性
-				data: [
-					{ value: 1, stationName: 's1' },
-					{ value: 3, stationName: 's2' },
-					{ value: 4, stationName: 's3' },
-					{ value: 9, stationName: 's4' },
-					{ value: 3, stationName: 's5' },
-					{ value: 2, stationName: 's6' },
-				],
-			},
-			{
-				name: '回温',
-				type: 'line',
-				smooth: true,
-				showSymbol: true,
-				symbol: 'emptyCircle',
-				symbolSize: 12,
-				yAxisIndex: 0,
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(
-						0,
-						0,
-						0,
-						1,
-						[
-							{ offset: 0, color: 'rgba(199, 237, 250,0.5)' },
-							{ offset: 1, color: 'rgba(199, 237, 250,0.2)' },
-						],
-						false
-					),
-				},
-				itemStyle: {
-					color: '#3bbc86',
-				},
-				data: [
-					{ value: 31, stationName: 's1' },
-					{ value: 36, stationName: 's2' },
-					{ value: 54, stationName: 's3' },
-					{ value: 24, stationName: 's4' },
-					{ value: 73, stationName: 's5' },
-					{ value: 22, stationName: 's6' },
-				],
-			},
-			{
-				name: '压力值(Mpa)',
-				type: 'bar',
-				barWidth: 30,
-				yAxisIndex: 1,
-				itemStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: 'rgba(108,80,243,0.3)' },
-						{ offset: 1, color: 'rgba(108,80,243,0)' },
-					]),
-					//柱状图圆角
-					borderRadius: [30, 30, 0, 0],
-				},
-				data: [
-					{ value: 11, stationName: 's1' },
-					{ value: 34, stationName: 's2' },
-					{ value: 54, stationName: 's3' },
-					{ value: 39, stationName: 's4' },
-					{ value: 63, stationName: 's5' },
-					{ value: 24, stationName: 's6' },
-				],
-			},
-		],
-	};
-	state.global.homeCharThree.setOption(option);
-	state.myCharts.push(state.global.homeCharThree);
+  if (!state.global.dispose.some((b) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
+  state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
+  const option = {
+    backgroundColor: state.charts.bgColor,
+    title: {
+      text: 'Disaster response monthly distribution change',
+      x: 'left',
+      textStyle: { fontSize: '15', color: state.charts.color },
+    },
+    tooltip: { trigger: 'axis' },
+    legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 },
+    grid: { top: 70, right: 80, bottom: 30, left: 80 },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['1km', '2km', '3km', '4km', '5km', '6km'],
+        boundaryGap: true,
+        axisTick: { show: false },
+      },
+    ],
+    yAxis: [
+      {
+        name: '供回温度(℃）',
+        nameLocation: 'middle',
+        nameTextStyle: { padding: [3, 4, 50, 6] },
+        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { color: state.charts.color, formatter: '{value} ' },
+      },
+      {
+        name: '压力值(Mpa)',
+        nameLocation: 'middle',
+        nameTextStyle: { padding: [50, 4, 5, 6] },
+        splitLine: { show: false },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { color: state.charts.color, formatter: '{value} ' },
+      },
+    ],
+    series: [
+      {
+        name: '供温',
+        type: 'line',
+        smooth: true,
+        showSymbol: true,
+        // 矢量画五角星
+        symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
+        symbolSize: 12,
+        yAxisIndex: 0,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(250,180,101,0.3)' },
+            { offset: 1, color: 'rgba(250,180,101,0)' },
+          ]),
+          shadowColor: 'rgba(250,180,101,0.2)',
+          shadowBlur: 20,
+        },
+        itemStyle: { color: '#FF8000' },
+        // data中可以使用对象，value代表相应的值，另外可加入自定义的属性
+        data: [
+          { value: 1, stationName: 's1' },
+          { value: 3, stationName: 's2' },
+          { value: 4, stationName: 's3' },
+          { value: 9, stationName: 's4' },
+          { value: 3, stationName: 's5' },
+          { value: 2, stationName: 's6' },
+        ],
+      },
+      {
+        name: '回温',
+        type: 'line',
+        smooth: true,
+        showSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 12,
+        yAxisIndex: 0,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              { offset: 0, color: 'rgba(199, 237, 250,0.5)' },
+              { offset: 1, color: 'rgba(199, 237, 250,0.2)' },
+            ],
+            false
+          ),
+        },
+        itemStyle: {
+          color: '#3bbc86',
+        },
+        data: [
+          { value: 31, stationName: 's1' },
+          { value: 36, stationName: 's2' },
+          { value: 54, stationName: 's3' },
+          { value: 24, stationName: 's4' },
+          { value: 73, stationName: 's5' },
+          { value: 22, stationName: 's6' },
+        ],
+      },
+      {
+        name: '压力值(Mpa)',
+        type: 'bar',
+        barWidth: 30,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(108,80,243,0.3)' },
+            { offset: 1, color: 'rgba(108,80,243,0)' },
+          ]),
+          //柱状图圆角
+          borderRadius: [30, 30, 0, 0],
+        },
+        data: [
+          { value: 11, stationName: 's1' },
+          { value: 34, stationName: 's2' },
+          { value: 54, stationName: 's3' },
+          { value: 39, stationName: 's4' },
+          { value: 63, stationName: 's5' },
+          { value: 24, stationName: 's6' },
+        ],
+      },
+    ],
+  };
+  state.global.homeCharThree.setOption(option);
+  state.myCharts.push(state.global.homeCharThree);
 };
 // 批量设置 echarts resize
 const initEchartsResizeFun = () => {
-	nextTick(() => {
-		for (let i = 0; i < state.myCharts.length; i++) {
-			setTimeout(() => {
-				state.myCharts[i].resize();
-			}, i * 1000);
-		}
-	});
+  nextTick(() => {
+    for (let i = 0; i < state.myCharts.length; i++) {
+      setTimeout(() => {
+        state.myCharts[i].resize();
+      }, i * 1000);
+    }
+  });
 };
 // 批量设置 echarts resize
 const initEchartsResize = () => {
-	window.addEventListener('resize', initEchartsResizeFun);
+  window.addEventListener('resize', initEchartsResizeFun);
 };
 // 页面加载时
 onMounted(() => {
-	initEchartsResize();
+  initEchartsResize();
 });
 // 由于页面缓存原因，keep-alive
 onActivated(() => {
-	initEchartsResizeFun();
+  initEchartsResizeFun();
 });
 // 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
 watch(
-	() => isTagsViewCurrenFull.value,
-	() => {
-		initEchartsResizeFun();
-	}
+  () => isTagsViewCurrenFull.value,
+  () => {
+    initEchartsResizeFun();
+  }
 );
 // 监听 pinia 中是否开启深色主题
 watch(
-	() => themeConfig.value.isIsDark,
-	(isIsDark) => {
-		nextTick(() => {
-			state.charts.theme = isIsDark ? 'dark' : '';
-			state.charts.bgColor = isIsDark ? 'transparent' : '';
-			state.charts.color = isIsDark ? '#dadada' : '#303133';
-			setTimeout(() => {
-				initLineChart();
-			}, 500);
-			setTimeout(() => {
-				initPieChart();
-			}, 700);
-            setTimeout(() => {
-				initPieChart();
-			}, 700);
-			setTimeout(() => {
-				initBarChart();
-			}, 1000);
-		});
-	},
-	{
-		deep: true,
-		immediate: true,
-	}
+  () => themeConfig.value.isIsDark,
+  (isIsDark) => {
+    nextTick(() => {
+      state.charts.theme = isIsDark ? 'dark' : '';
+      state.charts.bgColor = isIsDark ? 'transparent' : '';
+      state.charts.color = isIsDark ? '#dadada' : '#303133';
+      setTimeout(() => {
+        initLineChart();
+      }, 500);
+      setTimeout(() => {
+        initPieChart();
+      }, 700);
+      setTimeout(() => {
+        initPieChart2();
+      }, 700);
+      setTimeout(() => {
+        initBarChart();
+      }, 1000);
+    });
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
 );
 </script>