vue中使用echarts图表

1- 安装 echarts 依赖

npm install echarts -S

2- 创建图表全局引入

（1），在main.js 中引入

 import echarts from 'echarts'

（2），在main.js 中加代码

Vue.prototype.$echarts = echarts

3-页面里面调用使用

1，引入echarts

import echarts from 'echarts'

三步走：

1，给指点的图表设置宽高属性

2，设置标签的id名，进行初始化图表

3，开始绘制图表，生成你想要的图表

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

（这里的id名必须命名）

export default {

  name: 'hello',

  data () {

    return {

    }

  },

  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]

            }]

        });

    }

  }

}

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