echarts vue 酷炫图_vue + eCharts 实现图表展示

一、首先安装 eCharts 依赖

npm install echarts -S

二、main.js 引入 eCharts 依赖

2.1)在 main.js 中引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

2.2)HTML.vue

export default {

name: 'hello',

data () {

return {

msg: 'Welcome'

}

},

mounted(){

this.drawLine();

},

methods: {

drawLine(){

// 基于准备好的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]

}]

});

}

}

}

注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

三、新建独立 js 文件引入 eCharts

3.1)新建 myCharts.js 用于封装各种 eCharts

/**

* 各种画echarts图表的方法都封装在这里

*/

//导入eCharts

import