VUE中使用echarts（网上总结）

//1安装

cnpm install echarts -S

//2引入

main.js  

　　import echarts from 'echarts'

　　Vue.prototype.$echarts = echarts

//3使用

vue文件里面

 

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

 

js

 

mounted() {/*生命周期函数 刷新就会触发 */

this.initdata()

},

 

methods: {

initdata(){

// 基于准备好的dom，初始化echarts实例

let myChart = this.$echarts.init(document.getElementById('myChart'))

// 绘制图表

myChart.setOption({

title: { text: '在Vue中使用echarts' },

tooltip: {},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

});

}

 

},