按部就班VUE+Element 前端應用開發(10）--- 基於vue-echarts處理各類圖表展現

時間 2020-06-19

標籤按部就班 vue+element vue element 前端應用開發基於 echarts 處理各類圖表展現简体版

原文原文鏈接

在咱們作應用系統的時候，每每都會涉及圖表的展現，綜合的圖表展現可以給客戶帶來視覺的享受和數據直觀體驗，同時也是加強客戶認同感的舉措之一。基於圖表的處理，咱們通常每每都是利用對應第三方的圖表組件，而後在這個基礎上爲它的數據模型提供符合要求的圖表數據便可，VUE+Element 前端應用也不例外，咱們這裏使用了基於vue-echarts組件模塊來處理各類圖表vue-echarts是對echarts圖表組件的封裝。html

一、圖表組件的安裝使用

首先使用npm 安裝vue-echarts組件。前端

git地址：https://github.com/ecomfe/vue-echartsvue

NPM安裝命令git

npm install echarts vue-echarts

而後在對應模塊頁面裏面引入對應的組件對象，以下代碼所示。github

<script>
import ECharts from 'vue-echarts' // 主圖表對象
import 'echarts/lib/chart/line' // 曲線圖表
import 'echarts/lib/chart/bar' // 柱狀圖
import 'echarts/lib/chart/pie' // 餅狀圖
import 'echarts/lib/component/tooltip' // 提示信息

接着在Vue組件裏面對象中加入對象便可。apache

export default {
  components: {
    'v-chart': ECharts
  },

若是是全局註冊使用，那麼能夠在main.js裏面進行加載npm

// 註冊組件後便可使用
Vue.component('v-chart', VueECharts)

咱們來看看圖表展現的效果圖後端

柱狀圖效果echarts

餅狀圖函數

曲線圖

其餘類型，極座標和散點圖形

或者曲線和柱狀圖組合的圖形

更多的案例能夠參考官網的展現介紹：https://echarts.apache.org/examples/zh/index.html

二、各類圖表的展現處理

對於咱們須要的各類常規的柱狀圖、餅狀圖、折線圖（曲線圖）等，我下來介紹幾個案例代碼，其餘的通常咱們根據官方案例提供的data數據模型，構造對應的數據便可生成，就再也不一一贅述。

另外，咱們也能夠參考Vue-echarts封裝的處理demo:https://github.com/ecomfe/vue-echarts/tree/master/src/demo

對於柱狀圖，效果以下

在Vue模塊頁面的Template 裏面，咱們定義界面代碼以下便可。

<v-chart
  ref="simplebar"
  :options="simplebar"
  autoresize
/>

而後在data裏面爲它準備好數據便可，以下代碼所示。

 data() {
    return {
      simplebar: {
        title: { text: '柱形圖Demo' },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [{
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  }

固然咱們也能夠把這些構造對應數據的邏輯放在單獨的JS文件裏面，而後導入便可。

例如對於餅圖，它的界面效果以下所示。

它的vue視圖下，Template裏面的代碼以下所示。

<v-chart
  ref="pie"
  :options="pie"
  autoresize />

通常對於圖表的數據，因爲處理代碼可能很多，建議是獨立放在一個JS文件裏面，而後咱們經過import導入便可使用。

而後在data裏面引入對應的對象便可，以下所示。

<script>
import ECharts from 'vue-echarts' // 主圖表對象
import 'echarts/lib/chart/line' // 曲線圖表
import 'echarts/lib/chart/bar' // 柱狀圖
import 'echarts/lib/chart/pie' // 餅狀圖
import 'echarts/lib/component/tooltip' // 提示信息

// 導入報表數據
import getBar from './chartdata/bar' import pie from './chartdata/pie'
import scatter from './chartdata/scatter'
import lineChart from './chartdata/lineChart'
import incomePay from './chartdata/incomePay'

export default {
  components: {
    'v-chart': ECharts
  },
   return {
      pie,
      scatter,,
      lineChart,
      incomePay,
      simplebar: {
        title: { text: '柱形圖Demo' },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [{
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  },

其中pie.js裏面放置的是處理餅圖數據的邏輯，以下代碼所示。

export default {
  title: {
    text: '餅圖程序調用高亮示例',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
  },
  series: [
    {
      name: '訪問來源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '直接訪問' },
        { value: 310, name: '郵件營銷' },
        { value: 234, name: '聯盟廣告' },
        { value: 135, name: '視頻廣告' },
        { value: 1548, name: '搜索引擎' }
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

在界面處理的時候，值得注意的時候，有時候Vue頁面處理正常，可是圖表就是沒有出來，多是由於高度或者寬度爲0的緣由，須要對對應的樣式進行處理設置，以便可以正常顯示出來。

以下是我對圖表的設置的樣式處理，使得圖表在一個卡片的位置可以顯示正常。

<style scoped>
  .echarts { width: 100%; height: 400px;}

  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 20px;
  }
</style>