【deepseek用例生成平台-08】首页统计echarts-CSDN博客

本文链接：https://blog.csdn.net/qq_22795513/article/details/146492612

首页中部的内容，肯定是要放在HomeNew.vue的这里的：

然后先来统计图部分：

首选，需要先安装 echarts 插件。这个是专门用来画统计图的，比elementPlus自带的要专业很多。

所以需要先执行命令来安装：

npm install echarts --save

然后因为这个组件内容还是蛮多的，我们可以单独弄一个vue文件来存放，然后像菜单组件一样引入到首页就好：

打开这个组件，进行编辑如下：（代码来自于echarts官网建议我魔改后的，很好看但也比较复杂，大家可以直接复制，等之后后端功能实现后我们会把其中的一些数据变成变量通过接口获取，而其他诸如样式细节等大家可以不用浪费精力去深究）

<template>    <br><br>  <el-card class="chart-container">    <div ref="chart" style="width: 100%; height: 400px;"></div>      <span style="font-size: xx-small">（使用次数由系统自动在每月1日进行统计）</span>  </el-card></template><script>import * as echarts from 'echarts';import { ref, onMounted } from 'vue';export default {  name: 'HomeEcharts',  setup() {    const chart = ref(null);    onMounted(() => {      const myChart = echarts.init(chart.value);      const option = {        title: {          text: '本平台测试用例使用次数折线图',          left: 'center',        },        tooltip: {          trigger: 'axis',        },        xAxis: {          type: 'category',          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],        },        yAxis: {          type: 'value',        },        series: [          {            name: '使用次数',            type: 'line',            data: [120, 200, 150, 80, 70, 110, 130],            itemStyle: {              color: '#409EFF', // 折线颜色            },            lineStyle: {              width: 3, // 折线宽度            },            symbol: 'circle', // 数据点形状            symbolSize: 10, // 数据点大小          },        ],      };      myChart.setOption(option);    });    return {      chart,    };  },};</script><style scoped>.chart-container {  margin: 20px;}</style>