效果图
1、安装依赖
cnpm install echarts -S
2、main.js 全局引入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、页面中使用
<template>
<div class="hello">
<div id="myChart" :style="{width: '100%', height: '500px'}"></div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
this.drawLine()
},
methods: {
drawLine () {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '手机销量' },
tooltip: {},
xAxis: {
data: ['苹果', '华为', 'oppo', 'vivo']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [ 99, 89, 75, 60 ]
}]
})
}
}
}
</script>