echarts，大屏可视化，双折线图 可变横纵坐标动态展示数据

使用场景说明：用户选择不同的日期，获取后台数据，改变对应的横纵坐标展示数据

<template>
  <div style="position: relative;height: 100%;width: 100%;">
    <div ref="reletSituation" class="reletSituation">
    </div>
    <div class="dropDown">
      <a-space>
        <a-select ref="select" v-model:value="value1" style="width: 1rem;" size="small" @focus="focus"
          @change="handleChange">
          <a-select-option value="day" size="small">近七日</a-select-option>
          <a-select-option value="month" size="small">本月</a-select-option>
          <a-select-option value="lastMonth" size="small">上月</a-select-option>
          <a-select-option value="year" size="small">近一年</a-select-option>
        </a-select>
      </a-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, reactive } from "vue";
import * as echarts from "echarts";
import { reqMonthRenewalRate2 } from '/@/api/echarts/echarts'

onMounted(
  async () => {
    await getMonthRenewalRate1() //一定要获取数据，再初始化图标
    await init()
  },
)
//数据处理
const getMonthRenewalRate1 = async () => {
  let result2 = await reqMonthRenewalRate2(value1.value)
  if (result2.length == 0) {
    xaxisData2.value = []
  }
  if (value1.value == 'day' && result2.length <= 7) {
    xaxisData2.value = xaxisData1.slice(-result2.length)
    deliveryQuantity.value = result2.map((item) => { return item.deliveryQuantity });
    numberOfReturns.value = result2.map((item) => { return item.numberOfReturns });
  }

  if (value1.value == 'month' && result2.length <= 30) {
    for (let i = 0; i < result2.length; i++) {
      xaxisData2.value.push(i + 1)
      deliveryQuantity.value = result2.map((item) => { return item.deliveryQuantity });
      numberOfReturns.value = result2.map((item) => { return item.numberOfReturns });
    }
    xaxisData2.value.sort(function (a, b) {
      return (a - b);
    })
  }

  if (value1.value == 'lastMonth' && result2.length <= 30) {
    for (let i = 0; i < result2.length; i++) {
      xaxisData2.value.push(i + 1)
      deliveryQuantity.value = result2.map((item) => { return item.deliveryQuantity });
      numberOfReturns.value = result2.map((item) => { return item.numberOfReturns });
    }
  }
  if (value1.value == 'year' && result2.length <= 12) {
    xaxisData2.value = xaxisData3.slice(-result2.length)
    deliveryQuantity.value = result2.map((item) => { return item.deliveryQuantity });
    numberOfReturns.value = result2.map((item) => { return item.numberOfReturns });
  }
}
// day的数据
let xaxisData1: string[] = reactive(['近7天', '近6天', '近5天', '近4天', '近3天', '近2天', '近1天'])
// year的数据
let xaxisData3: string[] = reactive(['近十二月', '近十一月', '近十月', '近九月', '近八月', '近七月', '近六月', '近五月', '近四月', '近三月', '近二月', '近一月'])
// 展示的横坐标
let xaxisData2 = ref()
// 出库数
let deliveryQuantity = ref()
// 回库数
let numberOfReturns = ref()

const value1 = ref('day')
const focus = () => {
  // console.log('focus');
};

const transformFontSize = (fontsize) => {
  // 获取屏幕可视区宽度
  const width = document.body.clientWidth
  const ratio = width / 1920
  // 取下整
  return fontsize * ratio
}

const handleChange = async (value: string) => {
  // console.log(`selected ${value}`);
  value1.value = value
  xaxisData2.value = []
  deliveryQuantity.value = null
  numberOfReturns.value = null
  await getMonthRenewalRate1()
  await init()
};
const reletSituation = ref()
const init = () => {
  var myChart = echarts.init(reletSituation.value);
  let option = {
    title: {
      text: " 订单趋势图",
      left: "15%",
      top: transformFontSize(20),
      textStyle: {
        color: "#fff",
        fontWeight: '400',
        fontSize: transformFontSize(12),
      },
    },
    tooltip: {
      trigger: 'axis'
    },
    color: ["#59ffed", "#fff004"],
    legend: {
      data: ['车辆出库数', '车辆回库数'],
      orient: 'vertical',
      x: 'right',
      y: '3%',
      itemHeight: transformFontSize(15), //修改icon图形大小
      textStyle: {
        color: "#fff",
        fontSize: transformFontSize(12),
      }
    },
    grid: {
      top: '30%',
      left: '5%',
      right: '5%',
      bottom: '2%',
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      boundaryGap: true,
      splitLine: {
        show: false
      },
      data: xaxisData2.value,
      // data: ['近6月', '近5月', '近4月', '近3月', '近2月', '近1月'],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#006d8d'
        }
      },
      axisTick: {
        show: false, //隐藏坐标轴的刻度
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false
      },
      show: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#006d8d'
        }
      },

    },
    series: [
      {
        name: '车辆出库数',
        type: 'line',
        symbol: 'circle',
        symbolSize: transformFontSize(9),
        // stack: 'Total',
        data: deliveryQuantity.value,
        lineStyle: {
          width: transformFontSize(3),
        },
      },
      {
        name: '车辆回库数',
        type: 'line',
        symbol: 'circle',
        symbolSize: transformFontSize(9),
        // stack: 'Total',
        data: numberOfReturns.value,
        lineStyle: {
          width: transformFontSize(3),
        }
      },
    ]
  }
  window.onresize = function () { myChart.resize(); }
  myChart.setOption(option);
}
</script>