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

npm install echarts --save

<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;"><code>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,
};