关于echarts的简单的使用

1.npm install echarts@4.8.0 安装4.8版本的，不然会报错“Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“”如果已经安装高版本请使用npm uninstall echarts卸载

2.引入在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在单组件文件中使用

<template>
  <div>
    <div id="myChart" class="myChart" :style="{width: '300px', height: '300px'}"></div>
  </div>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
       
      }
    },
    computed: {

    },
    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]
            }]
        });
      }
    }
  }

</script>