1. 安裝

npm install echarts -S

2. 引入

• 全域性引入

//main.js檔案中
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

• 單個檔案引入

//.vue檔案
<script>
import * as echarts from 'echarts'
</script>

3. 使用

• 單個檔案引入

<template>
  <div>
    <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
//單獨引入
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  created() {},
  // 此時，頁面上的元素，已經渲染完畢
  mounted() {
    this.chartInit()
  },
  methods: {
    chartInit() {
      // 基於準備好的dom，初始化echarts例項
      var myChart = echarts.init(document.getElementById('main'))

      // 指定圖表的配置項和資料
      var option = {
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
          data: ['銷量']
        },
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }

      // 使用剛指定的配置項和資料顯示圖表。
      myChart.setOption(option)
    }
  }
}
</script>
 

注意1：要在mounted生命週期函式中例項化echarts物件。確保頁面上的元素已經渲染完畢

如果是全域性引入，使用時，要加this.$

var myChart = this.$echarts.init(document.getElementById('main'))

注意2：

匯入echarts執行依賴時，不能這樣import echarts from 'echarts'匯入，否則會出現Error in mounted hook: "TypeError: echarts__WEBPACK_IMPORTED_MODULE_0__.default is undefined"的錯誤