Vuejs使用Echarts

在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>

效果

效果