echarts引入成功为什么不显示 也没有报错

echarts 引入成功后不报错但不显示，方框显示了但是并未显示图表，求解答，谢谢

option那些都写对了？

把width也设置上试试

F12看控制台

高，宽都要去设置

Vue中使用echarts，实现代码如下：

<template>

    <div id="container" style="height: 400px; border: 1px solid red"></div>
</template>

<script>
//在项目终端安装echarts：npm install echarts --save
import * as echarts from "echarts";

export default {
  name: "AboutMe",
  data() {
    return {};
  },
  mounted() {
    setTimeout(() => {
      this.drawBar();
    }, 1500);
  },
  methods: {
    drawBar() {
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var app = {};

      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    },
  },
};
</script>

<style>
</style>

效果如下：

如有帮助，谢谢采纳～