基于vue-cli引入echarts插件绘制表图

前言

ECharts，一个使用 JavaScript 实现的开源可视化库，遵循 Apache-2.0 开源协议，免费商用。可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
除了PC端，小程序echarts也是支持试用的

安装依赖包

npm install echarts -save

全局引用

在main.js下

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

在需要vue里的template写入

<template>
  <div id="app">
    <div id="myChart" :style="{
       
       width: '800px', height: '500px'}"></div>
  </div>
</template>

按照官网给的属性绘制我们想要图标

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

效果图