uniugm/ui/src/views/bi/analyse/layout/analyseMainContentRightResult.vue

<script setup>

// 引入 Vue 的 Composition API
import {ref, onMounted, onBeforeUnmount} from 'vue'
// 引入 echarts 库
import * as echarts from 'echarts'


// 获取 DOM 元素的引用（用于初始化图表）
const chartRef = ref(null)
// 存储 ECharts 实例
let chartInstance = null

// 初始化图表的方法
const initChart = () => {
  if (chartRef.value) {
    // 初始化 echarts 实例
    chartInstance = echarts.init(chartRef.value)

    // 配置项
    const option = {
      title: {
        text: '事件分析图' // 图表标题
      },
      tooltip: {}, // 默认提示框配置
      legend: {
        data: ['销量'] // 图例名称
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X 轴数据
      },
      yAxis: {}, // Y 轴默认配置
      series: [
        {
          name: '销量', // 系列名称
          type: 'bar', // 图表类型为柱状图
          data: [5, 20, 36, 10, 10, 20] // 数据值
        }
      ]
    }

    // 使用配置项渲染图表
    chartInstance.setOption(option)
  }
}

const testResultTable = ref([
  {
    metric: "APP关闭.总次数",
    stageAcc: "426",
    day20250530: "49",
    day20250531: "70",
    day20250601: "61",
    day20250602: "78",
  },
  {
    metric: "APP打开.总次数",
    stageAcc: "401",
    day20250530: "45",
    day20250531: "63",
    day20250601: "45",
    day20250602: "32",
  },
])

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
  chartInstance?.resize()
}

// 组件挂载后执行初始化
onMounted(() => {
  initChart()
  // 监听窗口大小变化事件以支持响应式
  window.addEventListener('resize', resizeChart)
})

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  chartInstance?.dispose() // 销毁 echarts 实例
})
</script>

<template>
  <div class="clearfix"
       style="width: 100%;text-align: center;display: flex;align-items: center;justify-content: center;">
    <div ref="chartRef" style="width: 100%; height: 400px;margin: 10px 0 0 10px"></div>
  </div>

  <!--分隔线-->
  <div style="width: 100%;height: 1px;display: flex;align-items: center;justify-content: center;">
    <el-divider style="width: 90%;" content-position="center"></el-divider>
  </div>

  <el-row style="margin-top: 10px;margin-bottom: 10px;margin-left: 10px">
    <el-col :span="6">
      <el-button-group>
        <el-button>合并</el-button>
        <el-button>平铺</el-button>
      </el-button-group>
    </el-col>
    <el-col :span="10" :offset="8">
      <el-button-group style="float: right;margin-right: 20px">
        <el-button>按日期</el-button>
        <el-button>阶段汇总配置</el-button>
        <el-button>导出</el-button>
      </el-button-group>
    </el-col>
  </el-row>

  <el-row>
    <el-table :data="testResultTable">
      <el-table-column prop="metric" label="指标"></el-table-column>
      <el-table-column label="阶段汇总">
        <template #default="scope">
          <a href="#">{{ scope.row.stageAcc }}</a>
        </template>
      </el-table-column>
      <el-table-column label="2025-05-30(五)">
        <template #default="scope">
          <a href="#">{{ scope.row.day20250530 }}</a>
        </template>
      </el-table-column>
      <el-table-column label="2025-05-31(六)">
        <template #default="scope">
          <a href="#">{{ scope.row.day20250531 }}</a>
        </template>
      </el-table-column>
      <el-table-column label="2025-06-01(日)">
        <template #default="scope">
          <a href="#">{{ scope.row.day20250601 }}</a>
        </template>
      </el-table-column>
      <el-table-column label="2025-06-02(一)">
        <template #default="scope">
          <a href="#">{{ scope.row.day20250602 }}</a>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>

<style scoped>

a {
  color: #333;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both; /*清除元素左右两侧浮动的属性*/
}
</style>