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