From 4f113d1862ee978e7d0756f31af79ad73b1dc6d7 Mon Sep 17 00:00:00 2001
From: Junjie <540245094@qq.com>
Date: 星期四, 12 九月 2024 16:33:39 +0800
Subject: [PATCH] #
---
zy-asrs-admin/src/views/HomeView.vue | 142 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 140 insertions(+), 2 deletions(-)
diff --git a/zy-asrs-admin/src/views/HomeView.vue b/zy-asrs-admin/src/views/HomeView.vue
index 6ece80c..42278e5 100644
--- a/zy-asrs-admin/src/views/HomeView.vue
+++ b/zy-asrs-admin/src/views/HomeView.vue
@@ -1,6 +1,140 @@
<script setup>
-import { getCurrentInstance, ref } from 'vue';
+import { getCurrentInstance, ref, onMounted } from 'vue';
+import { get, post } from '@/utils/request.js'
+import * as echarts from "echarts";
const context = getCurrentInstance()?.appContext.config.globalProperties;
+
+let chartPie = null;
+const chartPieContainer = ref(null);
+let chartLine = null;
+const chartLineContainer = ref(null);
+
+function getPieOptions() {
+ post('/api/charts/loc/use', {}).then(resp => {
+ let result = resp.data;
+ if (result.code == 200) {
+ let data = result.data;
+
+ let pieOptions = {
+ title: {
+ text: '搴撲綅浣跨敤姣斾緥',
+ left: 'center',
+ top: '0%'
+ },
+ tooltip: {
+ trigger: 'item',
+ top: '0%'
+ },
+ grid: {
+ top: '0%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ // legend: {
+ // orient: 'vertical',
+ // left: 'left'
+ // },
+ series: [
+ {
+ type: 'pie',
+ radius: '70%',
+ data: data,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ }
+
+ chartPie.setOption(pieOptions);
+
+ }
+ })
+}
+
+function getLineOptions() {
+ post('/api/charts/loc/line', {}).then(resp => {
+ let result = resp.data;
+ if (result.code == 200) {
+ let data = result.data;
+
+ let lineOptions = {
+ title: {
+ text: '鏃ュ嚭鍏ュ簱鏁伴噺',
+ left: 'center',
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['鍏ュ簱鏁伴噺', '鍑哄簱鏁伴噺'],
+ top: '10%'
+ },
+ grid: {
+ top: '20%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: data.days
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: '鍏ュ簱鏁伴噺',
+ type: 'line',
+ data: data.in.value,
+ smooth: true
+ },
+ {
+ name: '鍑哄簱鏁伴噺',
+ type: 'line',
+ data: data.out.value,
+ smooth: true
+ }
+ ]
+ }
+
+ console.log(lineOptions);
+
+ chartLine.setOption(lineOptions);
+
+ }
+ })
+}
+
+function initChart() {
+ chartPie = echarts.init(chartPieContainer.value);
+ chartPie.setOption({
+ type: Object,
+ required: true
+ })
+
+ chartLine = echarts.init(chartLineContainer.value);
+ chartLine.setOption({
+ type: Object,
+ required: true
+ })
+}
+
+onMounted(() => {
+ initChart()
+ getPieOptions()
+ getLineOptions()
+})
+
</script>
<script>
@@ -10,5 +144,9 @@
</script>
<template>
- Hello World
+ <div style="display: flex;">
+ <div ref="chartPieContainer" style="width: 49%;height: 400px;"></div>
+ <div ref="chartLineContainer" style="width: 49%;height: 400px;"></div>
+ <!-- <EChartView ref="chartChild2" /> -->
+ </div>
</template>
--
Gitblit v1.9.1