From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示
---
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue | 74 +++++++++++++++++++++++++------------
1 files changed, 50 insertions(+), 24 deletions(-)
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
index 38477bd..d2d7612 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
@@ -1,23 +1,31 @@
<template>
- <!-- <common-title title="行业数据分析" /> -->
<div class="event-data-analysis">
<div class="little-title">行业数据分析</div>
<div class="chart" ref="echartsRef"></div>
</div>
</template>
<script setup>
-// import CommonTitle from '@/components/CommonTitle.vue'
import { getEventIndustryData } 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: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
+ },
+ formatter: function (params) {
+ let result = ''
+ params.forEach(item => {
+ const color = item.color.colorStops[1].color
+ const marker = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${color};"></span>`
+ result += `${marker}${item.seriesName}: ${item.value}<br/>`
+ })
+ return result
},
},
grid: {
@@ -30,8 +38,8 @@
xAxis: {
type: 'category',
axisLabel: {
- rotate: -45, // 旋转角度
- interval: 0, // 显示所有标签
+ // rotate: -45, // 旋转角度
+ // interval: 0, // 显示所有标签
color: '#FFFFFF',
fontFamily: 'Source Han Sans CN, Source Han Sans CN',
fontWeight: 400,
@@ -65,18 +73,36 @@
series: [],
}
-const testObj = color => ({
- type: 'bar',
- emphasis: {
- focus: 'series',
- },
- itemStyle: { color },
- data: [],
-})
+const seriesObj = (colorList) =>{
+ const offsets = [0,1,1]
+ return {
+ type: 'bar',
+ barWidth: 6,
+ emphasis: {
+ focus: 'series',
+ },
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1, // 渐变方向从上到下
+ colorList.map((color,index) => ({ offset:offsets[index], color}))
+ ),
+ },
+ data: [],
+ }
+}
-const eventType = [
- { name: '事件', ...testObj('#6FCAFF') },
- { name: '任务', ...testObj('#8EFFAC') },
+const seriesList = [
+ {
+ name: '事件',
+ ...seriesObj(['#FFFFFF','rgba(44,134,240,0.48)','#DDECFD']),
+ },
+ {
+ name: '任务',
+ ...seriesObj(['#FFFFFF', 'rgba(33,218,229,0.48)', '#E5FEFF']),
+ },
]
const params = inject('eventOverviewParams')
@@ -90,37 +116,37 @@
const list = res?.data?.data || []
echartsOption.xAxis.data = list.map(item => item.name)
//
- eventType.forEach(item => {
+ seriesList.forEach(item => {
item.data = []
})
list.forEach(item => {
item.data.forEach(item1 => {
- eventType.forEach(item2 => {
+ seriesList.forEach(item2 => {
item2.name === item1.name && item2.data.push(item1.value)
})
})
})
- echartsOption.series = eventType
- chart.setOption(echartsOption)
+ echartsOption.series = seriesList
+ chart.value.setOption(echartsOption)
}
onMounted(() => {
- chart = echarts.init(echartsRef.value)
- window.addEventListener('resize', chart.resize)
getData()
})
</script>
<style scoped lang="scss">
.event-data-analysis {
- height: 330px;
+ 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;
-
+ font-size: 14px;
}
+
.chart {
margin-top: 10px;
width: 356px;
--
Gitblit v1.9.3