單網頁vue的charts數據可視化作圖介紹和使用初級版

1 說明

1.1 推薦指數：★★★★

1.2 在官方文檔的基礎上進行，具體化和簡單化，目的就是一秒就懂，拿來就能使用。

1.3 親測的工具：谷歌瀏覽器和微軟vscode編輯器。

2 v-charts介紹：

2.1 是vue的charts的封裝。

2.2 在線地址：https://v-charts.js.org/#/

3 本次介紹單網頁vue的數據可視化，插件名稱介紹。

餅圖：ve-pie

折線圖：ve-line

柱狀圖：ve-histogram

水滴圖：ve-liquidfill

散點圖：ve-scatter

=====以上是5大基本圖=====

環形圖：ve-ring

樹圖：ve-tree

漏斗圖：ve-funnel

雷達圖：ve-radar

詞雲圖：ve-wordcloud

瀑布圖：ve-waterfall

4 具體舉例：

4.1 具體實現的代碼、需要修改的地方和說明。

<code>


  v-charts



     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
     
     
     
  
   
   
   
   
  
   

/<code>

4.2 ve-pie：

4.2.1 ve-pie.html代碼：

<code>


  v-charts:ve-pie



     
    
  
   
   
   
  
   

/<code>

4.2.2 效果圖：

4.3 ve-line

4.3.1 ve-line.html代碼：

<code>


  v-charts:ve-line



     
    
  
   
   
   
  
   

/<code>

4.3.2 效果圖：

4.4 ve-scatter

4.4.1 ve-scatter.html代碼：

<code>


  v-charts:ve-scatter


 

     
    
  
   
   
   
  
   

/<code>

4.4.2 效果圖：

===========================

其他略，方法同上；

但請注意：有些只能顯示一組數據

==========================

拿出來分享，喜歡就好。