1、安裝

cnpm install echarts --save-dev

2、在專案的main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

3、在Vue組建中使用

<template>
  <div ref="lineImg" class="lineEcharts"></div>
</template>
 
<script>
  import echarts from 'echarts';
  export default {
    name: 'lineCharts',
    mounted () {
      // 基於準備好的dom，初始化echarts例項
      var myChart = echarts.init(this.$refs.lineImg);
      // 指定圖表的配置項和資料
      var option = {
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
          }]
      };
      // 使用剛指定的配置項和資料顯示圖表。
      myChart.setOption(option);
    }
  };
</script>
 
<style scoped>
  .lineEcharts {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 0 auto;
  }
</style>
 

注意：在繪圖前必須要為 ECharts 準備一個具備高寬的 DOM 容器。在Vue中用ref獲取DOM元素