gameapi-client/src/views/components/EChartExample.vue

  <template>
    <div ref="chartRef" style="width: 100%; height: 420px;"></div>
 </template>
 
 <script setup>
 import {randomString} from "@/utils"
 import { ref, onMounted } from 'vue';
 import * as echarts from 'echarts';
 import { formatTime, finalTimestamp } from '@/utils/ruoyi'; // 时间格式化
 const { proxy } = getCurrentInstance();
 
 const chartRef = ref(null);
      const props = defineProps({
        data:{
          type: Array,
          default: () => []
        },
        dateType:{
          type: String,
          default: '1'
        },
        nameTile:{
         type: String,
          default: ''
        }
      })
      let datarr = [];
      let seriesArr = [];
      if (props.dateType == '1'){
        props.data.forEach(item => {
          datarr.push(formatTime(item.dayTime));
          seriesArr.push(item.cnt);
        })
      }else if (props.dateType == '2'){
        props.data.forEach(item => {
          datarr.push(item.day);
          seriesArr.push(item.number);
        })
      }
      // 在组件挂载后初始化图表
      onMounted(() => {
        const chart = echarts.init(chartRef.value); // 初始化图表
        const option = {
          tooltip: {
            trigger: 'axis'
          },
            grid: {
                top: "8%",
                left: "1%",
                right: "1%",
                bottom: "0%",
                containLabel: true,
              },
            xAxis: {
                type: 'category',
                data: datarr.length == 0 ?[0]:datarr,
                axisLine: {
                  onZero: false  // <<< 让X轴永远在底部
                }
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: props.nameTile,
                    data: seriesArr.length == 0 ?[0]:seriesArr,
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 10,
                    connectNulls: true,
                    lineStyle: {
                      width: 2
                    },
                }
            ]
        };
        chart.setOption(option); // 设置图表选项
      });
 </script>
 
 <style scoped lang='scss'>
 .column-copy {
    cursor: pointer;
    color: #409EFF;
    white-space: nowrap;
 
    i {
       transform: translateY(2px);
       margin-right: 2px;
    }
 }
 </style>