Vue中使用Echarts图形图表

前言

在后台管理中难免有数据分析功能，大多都是柱形图、饼状图、折线图等，那我们使用vue创建的后台项目中该如何实现图形图表功能呢？

一、下载Echarts

npm install echarts

二、引入Echarts

1、全局引入

• main.js

// main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

• Echarts.vue

<template>
  <div id="myChart"> </div>
</template>

<script>
  export default {
    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>

<style scoped>
  #myChart{
    width: 100%;
    height: 300px;
  }
</style>

2、按需引入

• Echarts.vue

<template>
  <div id="myChart"></div>
</template>

<script>
  let echarts = require('echarts/lib/echarts'); // 引入柱状图组件
  require('echarts/lib/chart/bar');
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  export default {
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = 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>

<style scoped>
  #myChart{
    width: 100%;
    height: 300px;
  }
</style>

三、效果图