在vue中使用echarts数据可视化

首先在mian.js中进入echarts

如果直接使用import echarts from 'echarts'可能会报错，所以这里使用的是

import * as echarts from 'echarts'

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

创建一个echarts组件，复制以下代码

<template>
  <div class="echarts">
    <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
  </div>
</template>
<script>
export default {
  name: 'echarts',

  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '数据报表' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
</script>

在页面中引入组件效果就出来啦~