(覆盤)Vue中如何使用v-echarts元件

MicahZJ發表於2020-04-03
VueEcharts元件

介紹

基於 Vue2.0 和 echarts 封裝的 v-charts圖表元件

只需要統一提供一種對前後端都友好的資料格式設定簡單的配置項，便可輕鬆生成常見的圖表。

npm安裝

npm i v-charts echarts -S
複製程式碼

vue中引入使用

1.完整引入（使用過）

直接在main.js中引入，之後就可以在index.vue頁面中直接引入

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'

Vue.use(VCharts)

new Vue({
  el: '#app',
  render: h => h(App)
})
複製程式碼

2.按需引入（該方法沒有嘗試）

v-charts的每種圖表元件，都已經單獨打包到lib資料夾下了

|- lib/
    |- line.common.js  -------------- 折線圖
    |- bar.common.js  --------------- 條形圖
    |- histogram.common.js  --------- 柱狀圖
    |- pie.common.js  --------------- 餅圖
    |- ring.common.js  -------------- 環圖
    |- funnel.common.js  ------------ 漏斗圖
    |- waterfall.common.js  --------- 瀑布圖
    |- radar.common.js  ------------- 雷達圖
    |- map.common.js  --------------- 地圖
    |- sankey.common.js  ------------ 桑基圖
    |- heatmap.common.js  ----------- 熱力圖
    |- scatter.common.js  ----------- 散點圖
    |- candle.common.js  ------------ k線圖
    |- gauge.common.js  ------------- 儀表盤
    |- tree.common.js  -------------- 樹圖
    |- bmap.common.js  -------------- 百度地圖
    |- amap.common.js  -------------- 高德地圖
複製程式碼

在main.js中引入後，可以直接將單個圖表引入到專案中的index.vue頁面

import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common'
import App from './App.vue'

Vue.component(VeLine.name, VeLine)

new Vue({
  el: '#app',
  render: h => h(App)
})
複製程式碼

在專案中使用的基本配置

官方案例是直接在template中使用，使用v-指令+圖示名稱

<ve-line :data="chartData" width="100px" :events="chartEvents"></ve-line>
複製程式碼

本人使用的是pug模板，所以引入方式如下

ve-line.echarts(:height="heightElectric" // 設定canvas高度
              :after-set-option="getConfig" // 設定鉤子函式
              :data="chartData" // 設定圖示展示的資料
              :extend="chartExtend" // 設定標識元素的屬性
              :loading="loading" // 設定資料未載入的等待狀態
              :settings="chartSettings" // 設定資料型別相關的屬性
              :colors="color") // 設定圖表展示顏色和樣式
複製程式碼

echarts的屬性實在太多，這裡就只寫一下使用過的一些基本屬性，具體的屬性可以看

echarts官網的api文件

v-echarts的api文件

文件寫的還是很全的，基本的使用場景都能覆蓋

1.data屬性的設定

方式一.基本的使用

這是使用當前資料格式的折線圖

(覆盤)Vue中如何使用v-echarts元件
其他型別的統計圖的資料格式都是一樣的，格式都是標題colums和 資料rows

{
  columns: ['日期', '訪問使用者', '下單使用者'],
  rows: [
    { '日期': '2018-05-22', '訪問使用者': 32371, '下單使用者': 19810 },
    { '日期': '2018-05-23', '訪問使用者': 12328, '下單使用者': 4398 },
    { '日期': '2018-05-24', '訪問使用者': 92381, '下單使用者': 52910 }
  ]
}
複製程式碼

方式二.設定別名的使用

實際專案中，肯定不會使用中文來當欄位名，返回的是英文欄位，但是我們又想展示的時候用中文展示標題，這個時候就需要在settings裡面設定別名，程式碼如下

<template>
  <ve-line :data="chartData" :settings="chartSettings"></ve-line>
</template>
<script>
  export default {
    data () {
      this.chartSettings = {
        labelMap: {
          PV: '訪問使用者',
          Order: '下單使用者'
        }
      }
      return {
        chartData: {
          columns: ['date', 'PV', 'Order'],
          rows: [
            { 'date': '2018-05-22', 'PV': 32371, 'Order': 19810 },
            { 'date': '2018-05-23', 'PV': 12328, 'Order': 4398 },
            { 'date': '2018-05-24', 'PV': 92381, 'Order': 52910 }
          ]
        }
      }
    }
  }
複製程式碼

我們看下效果

(覆盤)Vue中如何使用v-echarts元件
如果是單個資料的統計圖，colums只需要傳一組資料，rows也只需要傳一組資料就行

2.extends屬性的設定

我們看下基本的屬性配置

配置項 簡介 型別 備註
dimension 維度 string 預設 columns[0]
metrics 指標 array 預設 [columns[0], columns[1]]
dataType 資料型別 object -
xAxisType x軸型別 string 可選值: category, value, time, log
xAxisName x軸標題 string -
yAxisName y軸標題 string -
digit 設定資料型別為percent時保留的位數 number 預設為2
labelMap 設定指標的別名 object -
legendName 設定圖表上方圖例的別名 object -
tooltipTrigger 提示框的觸發方式 string 可選值: item, axis
axisVisible 是否顯示座標軸 boolean -
symbolSizeMax 氣泡最大值 number 預設為50
symbol 標記的圖形 string 內容參考文件
symbolSize 標記的大小 number, array, Function 內容參考文件
symbolRotate 標記的旋轉角度 number 內容參考文件
symbolOffset 標記相對於原本位置的偏移 array 內容參考文件
cursor 滑鼠懸浮時在圖形元素上時滑鼠的樣式 string 內容參考文件
scale 是否是脫離 0 值比例 boolean -
min y軸最小值 number -
max y軸最大值 number -

雙y軸的extend屬性設定

this.chartExtend = {
        tooltip: { // 修改提示框樣式
          trigger: 'axis',
          formatter: function(params){ // 自定義X軸座標點對應的label
            return params[0].axisValue + "</br>" +
              "<div style='float: left'> "+ params[0].seriesName +"："+ params[0].data[1] + "V" +"</div>" +
              "</br><div style='float: left'> "+ params[1].seriesName +"："+ params[1].data[1] + "A" +"</div>";
          },
        },
        series: {},
        axisVisible: false, // 是否顯示座標軸
        scale: [true],
        legend: { // 標題的展示位置
          left: 'right',
          show: true,
          textStyle: { // 標題的顏色
            color: 'white'
          }
        },
        xAxis: {// x軸設定
          boundaryGap: false, // 是否貼邊顯示圖表
          axisLabel: {
            color: 'white'
          }
        },
        yAxis (item) { // 因為是雙軸，所以需要指定雙軸的y軸樣式
          item[0].splitLine = Object.assign ({}, {
            lineStyle: { // 左y軸的顏色
              color: ['#3755DA'],
            }
          });
          item[0].axisLabel = Object.assign ({}, { // 左y軸的顏色 間隔線顏色
            color: 'white'
          });
          item[0].nameTextStyle = Object.assign ({}, { // 左y軸的文字顏色
            color: 'white',//正常是不用新增
          });
          item[1].splitLine = Object.assign ({}, {
            show: false, // 是否展示右y軸，這是是不展示
            lineStyle: { //右y軸的顏色
              color: ['#3755DA'],
            }
          });
          item[1].axisLabel = Object.assign ({}, { //右y軸的顏色 間隔線顏色
            color: 'white'
          });
          item[1].nameTextStyle = Object.assign ({}, { //右y軸的文字顏色
            color: 'white',//正常是不用新增
          });
          return item
        },
        grid: { // 設定圖表在canvas畫布的位置
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '2%',
        },
      }
複製程式碼

3.settings屬性的設定

setting的基本屬性

配置項 簡介 型別 備註
dimension 維度 array 預設columns第一項為維度
metrics 指標 array 預設columns第二項起為指標
xAxisType 橫軸的資料型別 string 可選值: category, value, time, log
yAxisType 左右座標軸資料型別 array 可選值: KMB, normal, percent
yAxisName 左右座標軸標題 array -
axisSite 指標所在的軸 object 預設不在right軸的指標都在left軸
stack 堆疊選項 object -
area 是否展示為面積圖 boolean 預設為false
scale 是否是脫離 0 值比例 array 預設為[false, false]，表示左右
兩個軸都不會脫離0值比例。
設定成 true 後坐標刻度不會
強制包含零刻度
min 左右座標軸最小值 array -
max 左右座標軸最大值 array -
digit 設定資料型別為percent時保留的位數 number 預設為2
labelMap 設定指標的別名，同時作用於提示框和圖例 object -
legendName 設定圖表上方圖例的別名 object -

雙y軸需要指定右y軸的資料來源，我們看程式碼

this.chartSettings = {
        labelMap: {
          PV: '訪問使用者',
          Order: '下單使用者'
        },
        axisSite: { // 定義右y軸的資料來源
            right: ['Order'] 
        },
      }
      return {
        chartData: {
          columns: ['date', 'PV', 'Order'],
          rows: [
            { 'date': '2018-05-22', 'PV': 32371, 'Order': 19810 },
            { 'date': '2018-05-23', 'PV': 12328, 'Order': 4398 },
            { 'date': '2018-05-24', 'PV': 92381, 'Order': 52910 }
          ]
        }
  }
複製程式碼

雙y軸的堆疊面積圖效果如下

(覆盤)Vue中如何使用v-echarts元件

3.鉤子函式的設定

共有屬性中的鉤子函式用於在配置項生成過程中進行調整以及獲取例項。

配置項 說明 引數
before-config 對資料提前進行額外的處理，
在資料轉化為配置項開始前觸發		 引數為 data，返回值為表格資料
after-config 對生成好的echarts配置進行額外的處理，
在資料轉化為配置項結束後觸發		 引數為 options，返回值為 echarts 配置
after-set-option 生成圖之後獲取echarts例項 引數為echarts例項
after-set-option-once 生成圖後獲取echarts例項
（只執行一次）		 引數為echarts例項

如果你想是一個如圖一樣的效果怎麼辦，這個時候就需要用到after-set-option這個鉤子函式

(覆盤)Vue中如何使用v-echarts元件
我們首先需要寫一個定時器用來獲取資料，獲取完資料之後，就需要用到這個鉤子函式來定時重新整理圖表所在canvas

/**
     * 處理重新整理後的echarts圖表
     * @param e
     */
    getConfig(e) {
      if (this.chartDataElectric.rows.length > 6 ) { // 如果資料長度大於6，則刪除第一條資料
        this.chartDataElectric.rows.splice(0,1)
      }
      e.setOption(this.chartDataElectric) //重新整理圖表
    },
複製程式碼

參考文章：

v-charts.js

相關文章