vue可視化圖表 基於Echarts封裝好的v-charts簡介

**vue可視化圖表 基於Echarts封裝好的v-charts**

近期公司又一個新的需求，要做一個訂單和銷售額統計的項目，需要用到可視化圖表來更直觀的展示數據。首先我想到的是Echarts，眾所周知Echarts是一個應用很廣的可視化圖表庫，用來展示統計數據更合適不過，但是偶然間發現了一個更為方便的圖表庫，就是我們今天要介紹的v-charts，它是基於Echarts圖表庫進行了一次封裝，讓我們可以更好更方便更簡單的來展示我們的數據，首先附上他的官方介紹：點擊這里

v-charts對於用戶很友好，把數據封裝成很好的模式，不進讓我們更好的來使用它，而且他還完全支持Echarts的所有方法和屬性。Echarts有的圖表，v-charts都進行了封裝。

下面先來一個柱狀圖：

現附上效果圖：

 

下面是使用方法：

點擊這里查看原帖

1.安裝依賴

*這里需要說明，由於v-charts是基於Echarts進行封裝的，所以我們在安裝依賴的時候，需要把Echarts和v-charts都進行安裝。*

npm install echarts v-charts --save-dev

 

2.依賴安裝好之后，我們直接引入v-charts即可，我們在main.js中進行引入

import VCharts from 'v-charts'
Vue.use(VCharts)

 

3.我們在相應的組件中直接使用就可以了，比如說柱狀圖是ve-histogram，我們直接寫標簽即可，不需要在創建一個div容器了

<ve-histogram
  :data="chartData"
  :colors="chartColor"
  :legend-visible="true"
  :loading="loading"
  :data-empty="dataEmpty"
  :extend="extend"
  :settings="chartSettings">
</ve-histogram>

 

這里介紹一下我上面用到的幾個屬性，
data：就是我們要綁定的數據，下面會詳細介紹
colors：就是我們圖表中每一項對應的顏色
legend-visible：是否顯示圖例
loading：是否顯示loaidng
data-empty：在數據為空的時候，是否顯示暫無數據
extend：就是我們自定義的Echarts的原有屬性，在v-charts的一些屬性滿足不了我們的需求的情況下，我們可以配置extend，來直接使用Echarts的optios，來覆蓋v-charts的屬性。
settings：一些v-charts封裝好的設置。

下面就是我們的屬性配置了：
在這里需要說明一下，v-charts的無數據和loading的樣式是單獨的，如果需要這兩個需求，我們需要引入css，如果不需要，不引入就行。

import 'v-charts/lib/style.css'
export default {
  name: 'VCharts',
  data () {
    return {
      chartSettings: {
        xAxisType: 'time',
        area: true,
        yAxisName: ['訂單總數', '訂單金額'],
        axisSite: {right: ['orderAmount']},
        labelMap: {'orderCount': '訂單數量', 'orderAmount': '訂單金額'}
      },
      chartData: {
        columns: ['date', 'orderCount', 'orderAmount'],
        rows: []
      },
      extend: {
        series: {
          symbolSize: 10,
          label: {
            normal: {
              show: true
            }
          }
        }
      },
      chartColor: ['#89dd47', '#3cabf4'],
      loading: false,
      dataEmpty: false
    }
  }
 created () {
    this.getData()
  }
  methods: {
    async getData () {
      const res = await getOrderData(})
      if (res.data.length === 0) {
        this.dataEmpty = true
      } else {
        this.chartData.rows = res.data.rows
        this.dataEmpty = false
      }
      console.log(res)
    },
  }
}

 

上述代碼中的getOrderData()方法是我調用的接口方法，如下所示：

// 圖表訂單和金額
export function getOrderData (res) {
  return http.post({
    url: base_url + '/order/getOrderData',
    data: res
  })
}

 

上述的http.post方法是我封裝的axios的post請求方法，篇幅有限，這里不在敘述，具體封裝方法，會在其他文章進行講解。
在這里我展示一下請求過來的data的結構

rows: [
    {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
    {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
    {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
    {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
    {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
    {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
    {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
    {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
    {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
    {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
    {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
    {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
    {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
    {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
    {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
  ]

 

 

這些都完成之后，我們就能在瀏覽器看到一開是的截圖了。
下面附上完整代碼，由於異步接口無法直觀的展示我們的data結構，所以我在完整代碼里面用的是靜態數據，方便大家更直觀的查看

<template>
  <ve-histogram
    :data="chartData"
    :colors="chartColor"
    :legend-visible="true"
    :loading="loading"
    :data-empty="dataEmpty"
    :extend="extend"
    :settings="chartSettings">
  </ve-histogram>
</template>
<script>

const DATA_FROM_BACKEND = {
  rows: [
    {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
    {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
    {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
    {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
    {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
    {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
    {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
    {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
    {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
    {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
    {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
    {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
    {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
    {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
    {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
  ]
};

import 'v-charts/lib/style.css'
export default {
  name: 'VCharts',
  data () {
    return {
      chartSettings: {
        xAxisType: 'time',
        area: true,
        yAxisName: ['訂單總數', '訂單金額'],
        axisSite: {right: ['orderAmount']},
        labelMap: {'orderCount': '訂單數量', 'orderAmount': '訂單金額'}
      },
      chartData: {
        columns: ['date', 'orderCount', 'orderAmount'],
        rows: []
      },
      extend: {
        series: {
          symbolSize: 10,
          label: {
            normal: {
              show: true
            }
          }
        }
      },
      chartColor: ['#89dd47', '#3cabf4'],
      loading: false,
      dataEmpty: false
    }
  }
 created () {
    this.getData()
  }
  methods: {
    async getData () {
      const res = await getOrderData(})
      if (res.data.length === 0) {
        this.dataEmpty = true
      } else {
        this.chartData.rows = DATA_FROM_BACKEND.rows // 注意這里應該是接口給返回回來的數據，為了方便展示data結構，我這里用的是靜態數據
        this.dataEmpty = false
      }
      console.log(res)
    },
  }
}
</script>

 

以上就是v-charts的基本用法了，上面用的是柱狀圖，其他例如：折線圖，餅狀圖等等都是這樣的用法，區別就是標簽不一樣

//折線圖
<ve-line :data="chartData"></ve-line>
//餅狀圖
<ve-pie :data="chartData"></ve-pie>

 

等等這里不在一一贅述，需要的直接去看v-charts官網介紹即可。
如果有我沒說明白的地方，歡迎大家給我留言或者私信。