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

首页中部的统计图部分需要放在homenew.vue文件中。为了实现这一功能，我们需要使用echarts插件，它比element plus自带的图表功能更为专业。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

首先，需要安装echarts插件，执行以下命令：

npm install echarts --save

由于统计图组件的代码量较大，我们可以创建一个独立的Vue文件来存放这些代码，然后像菜单组件一样将其引入到首页中。

打开新建的组件文件，进行以下编辑（以下代码基于echarts官网示例并进行了修改，视觉效果出众但也较为复杂，大家可以直接复制使用。未来我们会将数据部分通过接口获取，而样式细节等无需深究）：

<template>  <el-card class="chart-container">    （使用次数由系统自动在每月1日进行统计）  </el-card></template><p><script>import * as echarts from 'echarts';import { ref, onMounted } from 'vue';</p><p>export default {name: 'HomeEcharts',setup() {const chart = ref(null);</p><pre class="brush:php;toolbar:false">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,};

},};

然后，在HomeNew.vue中引入这个组件：

运行npm run serve后，访问https://www.php.cn/link/b8b195466d4f833578d5ee14a9a3c5b8，效果如下：

怎么样，现在我审美是不是提升了不少？主打简洁大气。