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

来源:https://www.cnblogs.com/hyl1991/archive/2019/03/28/10613692.html
-Advertisement-
Play Games

**vue可視化圖表 基於Echarts封裝好的v-charts** 近期公司又一個新的需求，要做一個訂單和銷售額統計的項目，需要用到可視化圖表來更直觀的展示數據。首先我想到的是Echarts，眾所周知Echarts是一個應用很廣的可視化圖表庫，用來展示統計數據更合適不過，但是偶然間發現了一個更為方 ...


**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的結構

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

 

 

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

 1 <template>
 2   <ve-histogram
 3     :data="chartData"
 4     :colors="chartColor"
 5     :legend-visible="true"
 6     :loading="loading"
 7     :data-empty="dataEmpty"
 8     :extend="extend"
 9     :settings="chartSettings">
10   </ve-histogram>
11 </template>
12 <script>
13 
14 const DATA_FROM_BACKEND = {
15   rows: [
16     {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
17     {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
18     {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
19     {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
20     {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
21     {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
22     {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
23     {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
24     {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
25     {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
26     {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
27     {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
28     {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
29     {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
30     {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
31   ]
32 };
33 
34 import 'v-charts/lib/style.css'
35 export default {
36   name: 'VCharts',
37   data () {
38     return {
39       chartSettings: {
40         xAxisType: 'time',
41         area: true,
42         yAxisName: ['訂單總數', '訂單金額'],
43         axisSite: {right: ['orderAmount']},
44         labelMap: {'orderCount': '訂單數量', 'orderAmount': '訂單金額'}
45       },
46       chartData: {
47         columns: ['date', 'orderCount', 'orderAmount'],
48         rows: []
49       },
50       extend: {
51         series: {
52           symbolSize: 10,
53           label: {
54             normal: {
55               show: true
56             }
57           }
58         }
59       },
60       chartColor: ['#89dd47', '#3cabf4'],
61       loading: false,
62       dataEmpty: false
63     }
64   }
65  created () {
66     this.getData()
67   }
68   methods: {
69     async getData () {
70       const res = await getOrderData(})
71       if (res.data.length === 0) {
72         this.dataEmpty = true
73       } else {
74         this.chartData.rows = DATA_FROM_BACKEND.rows // 註意這裡應該是介面給返回回來的數據，為了方便展示data結構，我這裡用的是靜態數據
75         this.dataEmpty = false
76       }
77       console.log(res)
78     },
79   }
80 }
81 </script>

 

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

1 //折線圖
2 <ve-line :data="chartData"></ve-line>
3 //餅狀圖
4 <ve-pie :data="chartData"></ve-pie>
View Code

 



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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Extjs renderer函數
    昨天提到了改變grid中 行的背景顏色，其實還有一個更簡單的方法，就是利用renderer:function(){}函數 renderer 函數是一個攔截者模式，用於改變渲染到單元格的值和樣式。 不過測試的時候發現IE11顏色顯示不出來。畢竟是與宇宙為敵的瀏覽器，就不去管了。 這個方法昨天的文章中也 ...
  • vue.js - 2
    最近開發公司vue前端項目，做一下筆記，偶爾上來查漏補缺 組件操作： 使用flag標識符結合v-if和v-else切換組件 頁面結構： Vue實例定義： 使用:is屬性來切換不同的子組件,並添加切換動畫 組件實例定義方式： 使用component標簽，來引用組件，並通過:is屬性來指定要載入的組件： ...
  • 網頁設計（CSS&JS）
    實驗一 簡單靜態網頁設計 一、 實驗目的： 二、 實驗內容： 根據提供的素材設計線上調查問卷。 三、 實驗要求： 四、 實驗學時：4學時 五、 實驗步驟： 實驗準備： 1.在硬碟上為本實驗建立文件夾（以下稱為“實驗文件夾”）。 2.根據提供的素材設計線上調查問卷： （1） 從開始菜單啟動記事本； （ ...
  • [個人網站搭建]·Django增加評論功能(Python3)
    [個人網站搭建]·Django增加評論功能 個人主頁--> https://xiaosongshine.github.io/ 個人網站搭建github地址：https://github.com/xiaosongshine/djangoWebs 安裝django插件 pip install djang ...
  • JS非同步解析
    同步和非同步 舉個
  • 構建vue零散筆記
    # vue項目(用webpack構建)的前提是已安裝了node.js,vue,vue-cli,webpack # 主要命令構建：vue init webpack 項目名（純英文，且不可駝峰）運行：npm run dev打包：npm run build(需要修改配置信息) # element-ui## ...
  • node.js主從分散式爬蟲
    前言 前文介紹過用Python寫爬蟲，但是當任務多的時候就比較慢， 這是由於Python自帶的http庫urllib2發起的http請求是阻塞式的，這意味著如果採用單線程模型，那麼整個進程的大部分時間都阻塞在等待服務端把數據傳輸過來的過程中。所以我們這次嘗試用node.js去做這個爬蟲。 為什麼選擇 ...
  • mathjs,math.js解決js運算精度問題
    Document 電腦算數誤差： 0.1+0.2 = 0.30000000000000004 17.45*3*0.9 = 47.114999999999995 17.45*0.9*3 = 47.115 用math進行計算，避免誤差,見下方js ... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類