155 lines
4.0 KiB
Vue
155 lines
4.0 KiB
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> |