前言

在后臺管理中難免有數(shù)據分析功能，大多都是柱形圖、餅狀圖、折線圖等，那我們使用vue創(chuàng)建的后臺項目中該如何實現(xiàn)圖形圖表功能呢？

一、下載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>

三、效果圖