fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 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: {
@@ -27,8 +29,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,
@@ -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,28 @@
   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;
      font-size: 14px;
   }
.chart {
   margin-top: 10px;
   width: 356px;
   height: 190px;
   height: 240px;
}
</style>