在Vue中使用echart

1、安装echart依赖（webpack）

npm install echarts --save

2、在main.js中全局中引用

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3、给一个div设置宽高

<div ref="chart" style="width:100%;height:376px"></div>

4、然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。

mounted(){
    this.getEchartData()  
    },


   methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }
        myChart.setOption(option)
      }
    }
  }