From 9439eaa3501a4dcf5c440ef6c722475aa4b9df42 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期二, 30 七月 2024 17:00:01 +0800
Subject: [PATCH] fix: 修改总览页面
---
src/views/project/ch/demo/MonthlyLeaderBoard.html | 23 +++++++++++++++++------
1 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/src/views/project/ch/demo/MonthlyLeaderBoard.html b/src/views/project/ch/demo/MonthlyLeaderBoard.html
index 38e4b1f..38a2173 100644
--- a/src/views/project/ch/demo/MonthlyLeaderBoard.html
+++ b/src/views/project/ch/demo/MonthlyLeaderBoard.html
@@ -8,6 +8,7 @@
<script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
<script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
<script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.js"></script>
<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
<link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
<script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
@@ -49,8 +50,8 @@
</head>
<body>
- <div class="w-full h-full bg-[#f2f4f8]" id="leaderBoard">
- <div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="leaderBoard">
+ <div class="space-y-1 bg-[rgb(242,244,248)]">
<div class="bg-white">
<div class="item_title">
<div class="leader_left"></div>
@@ -64,14 +65,17 @@
<el-table-column prop="CompanyName" label="缃戞牸鍛�"></el-table-column>
</el-table>
</div>
-
- <div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div>
- <div class="w-full bg-white h-[320px]" id="leaderBarChart"></div>
+ <div v-resize="chartContainerResize" class="w-full h-full">
+ <div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div>
+ <div class="w-full bg-white h-[320px]" id="leaderBarChart"></div>
+ </div>
</div>
</div>
</body>
<script>
const { createApp, onMounted, ref, reactive } = Vue;
+ const leaderChartDomRef = ref(null);
+ const leaderBarChartDomRef = ref(null);
const App = createApp({
setup() {
let state = reactive({
@@ -117,6 +121,7 @@
const initLeaderBoardChart = () => {
var chartDom = document.getElementById('leaderChart');
var leaderChartDom = echarts.init(chartDom);
+ leaderChartDomRef.value = leaderChartDom;
var option = {
title: {
text: '杩�12鏈堢即璐归噾棰�',
@@ -148,6 +153,7 @@
const barXData = state.leaderBoardList.map((item) => item.Name);
var chartDom = document.getElementById('leaderBarChart');
var leaderBarChartDom = echarts.init(chartDom);
+ leaderBarChartDomRef.value = leaderBarChartDom;
var option = {
xAxis: {
type: 'category',
@@ -174,15 +180,20 @@
option && leaderBarChartDom.setOption(option);
};
+ const chartContainerResize = ({ width, height }) => {
+ leaderChartDomRef.value.resize();
+ leaderBarChartDomRef.value.resize();
+ };
onMounted(() => {
initLeaderBoardChart();
initLeaderBoardBarChart();
});
- return { state };
+ return { state, chartContainerResize };
},
});
App.use(ElementPlus);
+ elementResizeDirective(App);
App.mount('#leaderBoard');
</script>
</html>
--
Gitblit v1.9.3