在元件<mychart.vue>中：

<template>
<div>
  <div ref="mychart"></div>
</div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    draw() {
      let echarts = require('echarts')
      // 基於準備好的dom，初始化echarts例項
      let myChart =
 
 this.$refs.mychart
      if (myChart) {
        let echartInit = echarts.init(myChart)  
        // 繪製圖表
        echartInit.setOption({
          title: {
            text: "ECharts 入門示例"
          },
          tooltip: {},
          xAxis: {
            data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
          }
 
,
          yAxis: {},
          series: [
            {
              name: "銷量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        });
      } else {
        console.log('myChart 為空');
      }
    }
  },
  mounted() {
    this.draw();
  }
};
</script>
 


<style>
#mychart {
  height: 500px;
}
</style>

值得注意的是，在 vue 專案中不推薦對 dom 的直接操作，例如

document.getElementId('my_div')

而應該使用 ref 引用來代替之：

<div ref = "myDiv"></div>
...
<script>
...
let myDiv = this.$refs.myDiv
</script>