Vue使用Echarts的一个报错

大口吃肉

这是俺正常的两个组件

```

但是放上Roundedcord这个组件就不行了，啥也没有控制台报错：

Uncaught Error: Initialize failed: invalid dom.
    at Module.init (echarts.js?1be7:2170:1)
    at eval (Roundedcord.vue?f61c:16:1)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Roundedcord.vue?vue&type=script&lang=js& (app.js:974:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (Roundedcord.vue?120e:1:1)
    at Module../src/components/Roundedcord.vue?vue&type=script&lang=js& (app.js:1289:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (Roundedcord.vue?787a:1:1)

这是这个组件的源码：
<template>
  <div>
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<style scoped>
#main{
  width: 600px;
  height: 400px;
}
</style>

<script type="text/javascript">
  import * as  echarts from 'echarts'
  const myChart = echarts.init(document.getElementById("main"));
  export default {
    data() {
      return {
        option: {
          // 基础提示框(Tooltip)
tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              name: "Rounded",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              // 高亮的图形样式和标签样式
emphasis: {
                label: {
                  show: true,
                  fontSize: "40",
                  fontWeight: "bold",
                },
              },
              // 指示线
labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: "Search Engine" },
                { value: 735, name: "Direct" },
                { value: 580, name: "Email" },
                { value: 484, name: "Union Ads" },
                { value: 300, name: "Video Ads" },
              ],
            },
          ],
        },
      };
    },
  };
  // 绘制
// eslint-disable-next-line no-undef
myChart.setOption(option);
</script>
```[/md]

大口吃肉

App.vue源码：
<template>
  <div id="app">
    <EchartDemo></EchartDemo>
    <card style="width: 480px"></card>
  </div>
</template>
<script>
//import EchartDemo from "./components/ChartDemo.vue";
//import Card from "./components/Card";
// eslint-disable-next-line no-unused-vars
import Roundedcord from "./components/Roundedcord.vue";
export default {
  name: "App",
  components: {
    //EchartDemo,
    //Card,
    // eslint-disable-next-line vue/no-unused-components
    Roundedcord,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#app > * {
  margin: 20px;
}
</style>