fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 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;