在VueJS當中使用Echarts

安裝Echars

npm install Echarts --save

vuejs當中的main.js文件

// 引入echars
import echarts from 'echarts'
// 添加echarts插件
Vue.prototype.$echarts = echarts

prototype 屬性使您有能力向對象添加屬性和方法。

vuejs當中的hello.vue（cli創建就有這個文件哦）

其實這里hello.vue指代的是組件，你可以使用任意組件。

<template>
  <div class="hello">
    <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      xVipData: [],
      yVipData: []
    }
  },
  mounted () {
    this.$http.get('http://www.xxxx.com/api/v1/data/vip/increment').then(response => {
      this.xVipData = response.body.xVipData
      this.yVipData = response.body.yVipData
      this.drawLine()
    }, response => {
      console.log('數據請求失敗')
    })
  },
  methods: {
    drawLine () {
      // 基于準備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 繪制圖表
      myChart.setOption({
        title: {
          text: '每月會員增長折線圖',
          left: 'center'
        },
        tooltip: {},
        xAxis: {
          data: this.xVipData
        },
        yAxis: {},
        series: [{
          name: '每月會員增長曲線折線圖',
          type: 'line',
          data: this.yVipData
        }]
      })
    }
  }
}
</script>

效果

效果