vue2.x引入echarts的饼图后一片空白，控制台也没有报错

<template>
  <div id="chart" :style="{ width: '300px', height: '300px' }"></div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/chart/pie");

var option;

option = {
  title: {
    text: "Referer of a Website",
    subtext: "Fake Data",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: "50%",
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

export default {
  name: "Echarts",
  components: {},
  props: {},
  data() {
    return {};
  },
  mouted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      var chartDom = document.getElementById("chart");
      var myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    },
  },
  computed: {},
};
</script>
<style scoped>
.myChart {
  box-sizing: border-box;
  padding: 0.5rem;
  float: right;
}
</style>

事件写错了，mounted，不是mouted，少了n
有帮助麻烦点下【采纳该答案】，谢谢~~

option && myChart.setOption(option);
 改为

myChart.setOption(option);
 

:style="{ width: '300px', height: '300px' }"
你第二行这个样式都是给的常量，不用写动态样式
去掉冒号 ，直接style= 就行
你这代码颜色提示都没了，很明显有问题
还有可能不能把渲染echart图的div放最外层，可能会有bug，你试着在外面再套一层div