vue+vant+vue-echarts竖版图表

<template>
  <div id="echartsBox">
    <topNav :title_name="'图表'"></topNav>
    <v-chart class="chart echarts" :option="option_column" ref="echartsRef" />
  </div>
</template>
<script>
import topNav from "../../components/topNavbar/index.vue";
import { getDeviceData, getCameraData } from "../../api/index.js";
//可全局也可在要使用的文件中用
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import ECharts, { THEME_KEY } from "vue-echarts";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default {
  name: "echartsBox",
  components: {
    "v-chart": ECharts,
    topNav,
  },
  provide: {
    [THEME_KEY]: "dark",
  },
  data() {
    return {
      id: this.$route.query.id,
      option_column: {
        // title: { text: "测试" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  created() {
    // this.fetchData();
  },
  watch: {
    "$route.query.id": {
      handler: function () {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        // this.fetchData();
      },
      deep: true, //深度监听
    },
  },
  methods: {
    handleResize() {
      const chartEl = this.$refs.echartsRef.$el;
      chartEl.style.width = "100%"; // 设置宽度为100%
      // this.$refs.echartsRef.echartsInstance.resize(); // 调用resize方法更新图表尺寸
    },
    // 获取设备数据
    async fetchData() {
      let res = await getDeviceData({
        standId: this.id,
        userId: window.sessionStorage.getItem("userId"),
      });
      if (res.code == 0) {
        this.pageData = res.data;
        console.log(res.data);
      } else {
        return;
      }
    },
  },
};
</script>
<style lang="stylus">
#echartsBox {
  .echarts {
    height: 100vw;
    width: calc(100vh - 2.5rem);
    transform: rotate(90deg);
    background: #000;
    border: none;
  }
}
</style>