From a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:49:12 +0800
Subject: [PATCH] feat:事件弹窗显示调整
---
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue | 39 +++++++++++++++++++++++++++++++--------
1 files changed, 31 insertions(+), 8 deletions(-)
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
index 8faa9e5..b661128 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
@@ -1,14 +1,16 @@
<template>
- <common-title title="事件趋势分析" />
- <div class="chart" ref="echartsRef"></div>
+ <div class="event-trend-analysis">
+ <div class="little-title">事件趋势分析</div>
+ <div class="chart" ref="echartsRef"></div>
+ </div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue'
import { getEventTrend } from '@/api/home/event'
import * as echarts from 'echarts'
+import useEchartsResize from '@/hooks/useEchartsResize'
const echartsRef = ref(null)
-let chart = null
+let { chart } = useEchartsResize(echartsRef)
const echartsOption = {
tooltip: {
@@ -73,6 +75,18 @@
emphasis: {
focus: 'series',
},
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(24, 141, 240, 0.4)', // 顶部颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(24, 141, 240, 0)', // 底部颜色
+ },
+ ]),
+ },
data: [], // 示例数据，根据实际完成率计算
},
}
@@ -89,18 +103,27 @@
const list = res?.data?.data || []
echartsOption.xAxis.data = list.map(item => item.name)
echartsOption.series.data = list.map(item => item.value)
- chart.setOption(echartsOption)
+ chart.value.setOption(echartsOption)
}
onMounted(() => {
- chart = echarts.init(echartsRef.value)
- window.addEventListener('resize', chart.resize)
getData()
})
</script>
<style scoped lang="scss">
+.event-trend-analysis {
+ height: 280px;
+}
+.little-title {
+ background: url('@/assets/images/little-title-bg.png') no-repeat center / 100% 100%;
+ width: 372px;
+ height: 28px;
+ line-height: 28px;
+ padding-left: 16px;
+ }
.chart {
+ margin-top: 10px;
width: 356px;
- height: 190px;
+ height: 240px;
}
</style>
--
Gitblit v1.9.3