一鍵生成數據圖表！堪稱辦公最實用的效率神器，收藏

近，搜索到了一個很好玩的神器網站~

經常需要做數據圖或者PPT的朋友，一定要收藏！

比如，我們年終的時候，需要交一個年終匯報PPT，往往需要在PPT中插入圖表數據，但是很多人做出來的很丑，美化圖表也需要花費很長時間。對于沒有什么設計感的小白來說，確實有點復雜。

給各位推薦的這個神器，可以自動幫你生成設計感的數據圖表。

網址：https://chartsfactory.com/new

怎么使用呢？

打開網站之后，因為是外國的網站，所以需要翻譯成中文。在右側菜單欄中，可以選擇主題以及編輯圖表等按鈕。

在主題中有很多選項，比如：赫拉、宙斯等，可以看到不同的效果，選擇一個合適的風格就可以了。

然后點擊編輯圖表，選擇圖表類型、標題以及顏色，然后將數據輸入進去，按下一鍵生成就完成了：

是不是很方便？

這里，給各位看一下利用這個網站，做出來的數據圖表：

不僅能生成柱狀圖，還可以做成餅圖、環形圖、折線圖等。

制作好了之后，直接點擊下載，系統另存為PNG格式的圖片，保存到電腦，然后，需要放入PPT中，直接插入就可以了~

有了這個網站，你可以不用擔心不會搭配色彩、數據圖不好看等問題了，趕緊收藏吧~

最后，送上一份大禮包：

關注@PPT進化論，私信回復關鍵詞【30套】，即可獲取我收藏的PPT模板資源了~

位表親好啊，今天和大家分享一個圓環圖的制作技巧，看看簡單的圓環圖是如何麻雀變鳳凰的。

先看效果圖：

接下來咱們以Excel 2013為例，說說具體的操作步驟：

步驟一：首先制作數據，輔助數據為1（百分百）減掉完成率，公式為：

=1-A2

步驟二：選中完成率和輔助列數據后→【插入】→【圓環圖】

步驟三：選中數據后復制，然后選中創建好的圖表后按Ctrl+V組合鍵粘貼兩次。

小伙伴會說這里只有兩個環，為什么要粘貼兩次成為三個環，嗯，后面會有擴展說明的。。。

步驟四：為了設置兩環重疊，選中圖表，單擊鼠標右鍵【更改圖表系列類型】→勾選【次坐標】

選中次坐標環后→【圓環圖內徑大小】設置為90：

選中主坐標環后→【圓環圖內徑大小】設置為50

提示：

如果不設置主次圓環，則無法單獨設置圓環的內徑大小。

選中主內環【設置數據系列格式】→【填充】→【線條】（無線條）

選中主外環【設置數據系列格式】→【填充】（無填充）→【線條】（無線條）

提示：

設置主次圓環后雖然可單獨設置內徑大小，但外圍起點卻無法調整，所以主坐標圓環設置兩個圓環，最外圍環設置為無填充作為占位，讓主次坐標圓環外圍不同起點。

步驟五：最后設置次坐標圓環→【環圓內徑大小】設置為65

點兩下可單獨選中次坐標環的輔助數據系列設置→【填充】（無填充）→【線條】（無線條）

點兩下可單獨選中次坐標環的完成數據系列設置→【填充】→【線條】（無線條）

最后添加數據標簽，排版組合，OK了。

作者：提線木偶

言

分享之前我們先來普及一下什么是數據可視化？數據可視化可以把數據從冰冷的數字轉換成圖形，揭示蘊含在數據中的規律和道理。數據可視化通俗來說就是：數據的展示、處理和分析。目的是借助于圖形化手段，清晰有效地傳達與溝通信息。

那前端數據可視化又是什么呢？前端數據可視化其實就是利用前端表現層的手段，以前端手段展示、處理和分析數據。前端因為H5的到來，使前端有了質的飛躍，也使前端數據可視化的飛速發展得到了契機。H5提供的canvas就是這一契機。它是前端利用JS制作在做前端數據可視化的利器，幾乎全部前端數據可視化工具都是基于其上做的。

簡而言之，前端數據可視化是數據可視化的發展也是促使前端發展的支柱。

接下來要實現數據可視化平臺酷屏展示效果，前端界出現了各種第三方開源庫：Echarts（百度），AntV（阿里），Highcharts（國外公司），D3.js（國外公司）等。但是，萬變不離其宗。

總的來說，所有的第三方庫都是基于這兩種瀏覽器圖形渲染技術實現的： Canvas 和 SVG 。

SVG Canvas 不依賴分辨率依賴分辨率支持事件處理器不支持事件處理器最適合帶有大型渲染區域的應用程序（如地圖）弱的文本渲染能力復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）能夠以 .png 或 .jpg 格式保存結果圖像不適合游戲應用最適合圖像密集型的游戲可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景都需要重新繪制。

數據可視化利器對比

1、兼容性

Highcharts 兼容 IE6 及以上的所有主流瀏覽器，完美支持移動端縮放、手勢操作。
Echarts 兼容 IE6 及以上的所有主流瀏覽器，同樣支持移動端的縮放和手勢操作。
D3 兼容IE9 及以上的所有主流瀏覽器，對于移動端的兼容性也同上。
AntV 兼容IE9 及以上的所有主流瀏覽器，對于移動端的兼容性也同上。

2、是否免費/開源

Highcharts 非商業免費，商業需授權，代碼開源。
Echarts 完全免費，代碼開源。
D3 完全免費，代碼開源。
AntV 完全免費，代碼開源。

3、難易程度

Highcharts 基于SVG，方便自己定制，但圖表類型有限。
Echarts 基于Canvas，適用于數據量比較大的情況。
D3版本v3 基于SVG，方便自己定制；D3版本v4支持Canvas+SVG，如果計算比較密集，也可以選擇用Canvas。除此之外，D3圖表類型非常豐富，幾乎可以滿足所有開發需求，但代碼相對于以上兩個插件來說，會稍微難一點。
G 是 AntV 螞蟻金服旗下一款易用、高效、強大的 2D 可視化渲染引擎，提供 Canvas、SVG 等多種渲染方式的實現。

通過各種比較之后，我最終選擇基于Echarts進行開發，上手快。當然，如果技術夠硬，可以選擇D3.js等，學成后牛逼哄哄，非常適合用于為用戶制定個性化圖表，但更強的專業性也就意味著更高的學習成本，仁者見仁智者見智吧。

了解可視化相關設計

自己去百度搜索數據可視化設計，乍一看，設計主題都是偏深藍色調。科技感，酷炫，大屏展示，視覺沖擊感強。如圖：

看完這些，基本對大數據可視化的設計有所了解，沒有UI設計師，自己也懂一點設計得話，前端一樣可以愉快的玩耍。先上一波效果圖。

效果截圖

登錄界面

酷屏首頁組件庫

看了以上效果圖，都只是靜態的，還不過癮，直接線上體驗：jackchen0120.github.io/vueDataV/

高端大氣上檔次，是我追求的目標。如果感覺還不錯的話，老鐵們是不是賞個點贊鼓勵一哈，作者才有動力繼續寫下去。好了，言歸正傳，想要快速做出酷炫大屏，讓人眼前一亮，就請接著往下看。

項目架構

│  vue.config.js                      // webpack配置              
├─public
│      favicon.ico                    // ico圖標
│      index.html                     // 入口html文件
└─src
    │  App.vue                        // 根組件
    │  main.js                        // 程序入口文件
    ├─assets
    │  ├─iconfont                     // 引用阿里巴巴矢量圖標庫   
    │  ├─img                          // 存放公共圖片文件夾      
    │  ├─js
    │  │      utils.js                // 封裝工具類方法
    │  └─styles
    │      │  base.scss               // 基礎樣式文件
    │      │  common.scss             // 公用樣式文件
    │      └─fonts                    // 字體庫文件        
    ├─components
    │  │  index.js                    // 封裝組件庫
    │  ├─bar3d                        // 3D立體柱狀圖
    │  ├─bgAnimation                  // 登錄界面背景圖動畫      
    │  ├─cakeLinkage                  // 柱餅組合聯動    
    │  ├─circleNesting                // 圓環套圓環   
    │  ├─circleRunway                 // 環形跑道圖   
    │  ├─colorfulArea                 // 多彩輪播面積     
    │  ├─colorfulRadar                // 多彩雷達    
    │  ├─dynamicLine                  // 動態輪播折線圖   
    │  ├─dynamicList                  // 動態列表動畫   
    │  ├─flashCloud                   // 閃動云  
    │  ├─gauge                        // 儀表盤   
    │  ├─modal                        // 自定義全局模態框   
    │  ├─pyramid                      // 金字塔動畫   
    │  ├─pyramidTrend                 // 金字塔趨勢  
    │  ├─rainbow                      // 彩虹軌道圖    
    │  ├─ringPie                      // 環形餅圖    
    │  ├─ringPin                      // 環形氣泡圖   
    │  ├─rotateColorful               // 旋轉多彩圖   
    │  ├─scanRadius                   // 掃描半徑圖 
    │  ├─scrollArc                    // 滾動弧形線  
    │  ├─seamless                     // 新聞無縫滾動 
    │  ├─sinan                        // 司南排名圖  
    │  ├─staffMix                     // 人員占比   
    │  ├─szBar                        // 雙軸柱狀圖 
    │  ├─toast 
    │  │      index.js                // 注冊全局消息提示框組件
    │  │      index.vue               // 自定義消息提示框模板
    │  └─waterPolo
    │          index.vue              // 水球圖、水波圖   
    ├─router
    │      index.js                   // 單頁面路由注冊組件
    ├─store
    │      index.js                   // 狀態管理倉庫未使用到
    └─views
            Home.vue                  // 酷屏首頁統計圖
            Login.vue                 // 登錄界面
復制代碼

技術棧

vue2.6
echarts4.7
axios
webpack
ES6
scss
css3
jquery
iconfont

功能模塊

登錄界面抖動
粒子動效
背景圖輪播
自定義全局模態框
自定義消息提示框
數字滾動
酷屏首頁組件庫
各種酷炫小部件
可視化面板布局

準備工作

windows 10系統
下載安裝 nodejs v10+ nodejs.org/zh-cn/
代碼編輯器工具 sublime text 3

搭建開發環境（此處非小白可以忽略）

1）打開命令行窗口，輸入 node -v 查看，出現版本號說明已安裝成功，如下圖：

2）使用以下命令安裝vue-cli3

npm install -g @vue/cli
# 安裝指定版本
npm install -g @vue/cli@3.11.0
# OR
yarn global add @vue/cli
復制代碼

3）安裝完成，檢查vue版本，如下圖：

vue -V
復制代碼

4） vue-cli3 創建項目及運行

vue create woyouzhe
cd woyouzhe
npm run serve
復制代碼

在瀏覽器地址欄輸入：http://localhost:8080/

5）開發配置在使用vue-cli3腳手架創建項目后，因為webpack的配置均被隱藏，當你需要覆蓋原有的配置時，則需要在項目的根目錄下，新建vue.config.js文件，來配置新的配置如下（含注解）：

module.exports={
    publicPath: process.env.NODE_ENV==="production" ? "/vueDataV/" : "/", // 部署生產環境和開發環境下的URL：可對當前環境進行區分
    lintOnSave: false, // 是否在代碼保存時進行eslint檢測
  	productionSourceMap: false, // 是否在構建生產包時生成sourceMap文件，false將提高構建速度
  	devServer: { // webpack-dev-server 相關配置 
	    port: 8081, // 端口號
	    hotOnly: false, // 取消熱更新
	    // proxy: { // 使用代理
	    //   '/api': {
	    //      target: '//api.github.com', // 目標代理服務器地址
	    //     changeOrigin: true, // 允許跨域
	    //     pathRewrite:{
	    //       '^/api': '' // 重寫路徑，需要設置重寫的話，要在后面的調用接口前加上/api來代替target
	    //     }
	    //   }
	    // }
	},
	configureWebpack: {
      // 把原本需要寫在webpack.config.js中的配置代碼 寫在這里 會自動合并
      externals: {
       'jquery' : '$',
       'echarts': 'echarts',
       'axios' : 'axios'
      }
    }
}
復制代碼

在配置文件vue.config.js中添加webpack的externals對象，把不需要打包的依賴庫（減少打包文件體積），直接按上面的方式寫入。然后在index.html文件中引入CDN即可，如下圖：

6）公共樣式，圖片，字體，JS，統一存放在/src/assets/文件夾下，如下圖：

js文件夾里面的utils.js文件的作用，如下圖：

作者偷懶只針對酷屏首頁組件庫會用到，通常按照UI設計師提供的數據可視化屏幕尺寸都是寬：1920px，高：1080px，所以上面的配置也按照這個尺寸進行屏幕縮放。后續會專門講數據可視化面板的合理布局。首頁引用如下圖：

iconfont文件夾存放圖標文件，可以直接去阿里巴巴矢量圖標庫查找下載所需要的圖標。

style文件夾存放base.scss（基本樣式）和common.scss（組件庫通用樣式），直接在main.js文件引入即可，如下圖：

功能設計和代碼實現

按照上面的步驟完成腳手架構建，把需要的axios、vue-router、echarts、scss、jquery等依賴庫引入和安裝配置好，準備開始上路。

登錄界面主要功能包含：背景圖輪播、粒子動效、登錄框抖動、自定義消息提示框等等。

背景圖輪播

利用css3動畫屬性animation實現輪播背景圖的路徑，使這個動畫無限循環下去，以實現背景圖自動輪播的效果。背景圖輪播功能已封裝注冊全局小組件在components/bgAnimation目錄文件，直接上代碼：

<template>
  <ul class="slide-box">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</template>

<script>
export default {
  name: "bgAnimation"
};
</script>

<style lang="scss">
.slide-box {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 134, 179, .5);
  top: 0;
  left: 0;
  z-index: 0;
  li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imgAnimation 48s linear infinite 0s;
    -moz-animation: imgAnimation 48s linear infinite 0s;
    -o-animation: imgAnimation 48s linear infinite 0s;
    -ms-animation: imgAnimation 48s linear infinite 0s;
    animation: imgAnimation 48s linear infinite 0s;

    &:nth-child(1) {
      background-image: url(../../assets/img/bg-4.jpg);
    }
    &:nth-child(2) {
      background-image: url(../../assets/img/bg-5.jpg);
      -webkit-animation-delay: 12s;
      -moz-animation-delay: 12s;
      -o-animation-delay: 12s;
      -ms-animation-delay: 12s;
      animation-delay: 12s;
    }
    &:nth-child(3) {
      background-image: url(../../assets/img/bg-2.jpg);
      -webkit-animation-delay: 24s;
      -moz-animation-delay: 24s;
      -o-animation-delay: 24s;
      -ms-animation-delay: 24s;
      animation-delay: 24s;
    }
    &:nth-child(4) {
      background-image: url(../../assets/img/bg-4.jpg);
      animation-delay: 36s;
    }
  }
}
@-webkit-keyframes imgAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -webkit-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }
  25% {
    opacity: 0;
    -webkit-transform: scale(1.3);
  }
  100% {
    opacity: 0;
  }
}
@keyframes imgAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    transform: scale(1.1);
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    transform: scale(1.2);
  }
  25% {
    opacity: 0;
    transform: scale(1.3);
  }
  100% {
    opacity: 0;
  }
}
</style>
復制代碼

如果對animation屬性不熟，可以參考這個網站教程。

粒子動效

點擊查看效果這種粒子背景特效在Vue框架中實現不難，因為已經有大神幫我們做好了，我們只需引入到自己的項目中即可，作者推薦vue-particles插件，簡單看一下使用，具體用法可以移步vue-particles官網。

<vue-particles 
  color="#6495ED"
  :particleOpacity="0.7"
  :particlesNumber="80"
  shapeType="circle"
  :particleSize="4"
  linesColor="#6495ED"
  :linesWidth="1"
  :lineLinked="true"
  :lineOpacity="0.6"
  :linesDistance="150"
  :moveSpeed="3"
  :hoverEffect="true"
  hoverMode="grab"
  :clickEffect="true"
  clickMode="push"
>
</vue-particles>
復制代碼

自定義全局消息提示框

消息彈框組件，默認3秒后自動關閉，可設置info/success/warning/error類型。效果如下圖：

消息彈框功能已封裝注冊全局小組件在components/toast目錄文件，代碼如下：

<template>
  <transition name="fade">
    <div class="toast-container" v-if="visible">  
      <div class="toast" :class="type">
        <div class="content">
          <i class="iconfont" :class="'icon-' + type"></i>
          <span>{{ content }}</span>
        </div>
        <i v-if="hasClose" class="iconfont icon-close close" @click="visible=false"></i>
      </div>
    </div>
  </transition>
</template>
 
<script>
export default {
  name: 'Toast',
  data() {
    return {  
      content: '',
      time: 3000,
      visible: false,
      type: 'error',  //四種類型：info, success, warning, error
      hasClose: false,     
    }
  },
  mounted() {
    this.close();
  },
  methods: {    
    close () {
      setTimeout(()=>{
        this.visible=false;
      }, this.time);
    }
  }
}
</script>
復制代碼

在components/toast/index.js目錄文件中注冊全局組件，如下圖：

在main.js中全局引用，如下圖：

在登錄模板界面調用即可，如下圖：

參數名類型說明 content String 內容 time Number 消失時間，默認3秒后消失 type String info/success/warning/error，默認info hasClose Boolean 是否含關閉按鈕，默認false

最后

由于時間關系，文章寫的倉促，難免會有些問題或BUG出現，愿意接受批評和指正。此次實戰項目分享內容分為上下兩篇文章，下一篇要分享的內容大概有：自定義全局模態框、首頁設計布局、數字滾動、某個酷炫小部件開發等。

作者：懶人碼農
鏈接：https://juejin.im/post/5ebbf0b25188256d8a229035
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

在線咨詢

上一篇：好程序員web前端分享History API技能詳解
下一篇：Excel設置動態打印區域，零基礎也一學就會！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商