如何通過圖標前端插件完成高級可視化圖表？筆者在此給出了詳細教程，與大家分享~~

后臺開發中避免不了實現一些可視化的圖表，主要制作的方法有四種：Excel表格截圖、Axure圖形繪制、Axure網頁框架和Axure第三方圖表元件。

第三個“Axure網頁框架”需要結合antv、echarts、HighCharts等前端可視化插件代碼。

第四個“Axure第三方圖表元件”，是由技術大佬開發的Axhub Charts圖表元件。但是圖表的元件數有限，適合快速搭建簡單的圖表，但是無法滿足我們更復雜的圖表設計。

因此，想要更高級的可視化圖表還是需要通過第三種方法實現。接下來，給大家詳細講解具體方法（此教程以echarts為例）：

ECharts是一款由百度前端技術部開發的，基于Javascript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。

具體實現方法

第一步

從左側【元件庫】拉入一個【內聯框架】作為可視化圖表的載體。如下所示：

第二步

1. 瀏覽器打開echarts的可視化圖表官網鏈接地址：https://www.echartsjs.com/examples/zh/index.html

2. 選擇符合你要求的可視化圖表，點擊進入編輯運行頁面：此教程以這個復雜的可視化案例講解，鏈接如下：https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest

圖形如下所示：

點擊右下角的【Download】將圖表的前端代碼下載下來，文件為pie-nest.html。再將此文件放在Axure源文件之前發布生成文件夾里面，如下所示：

你可以在代碼編輯器中修改成自己想要的數據指標以及數據項；

3. 雙擊【內聯框架】，選擇下面的【鏈接到url或文件】的選項，并將pie-nest.html鏈接輸入進去。如下所示：

第三步

雙擊文件夾中的index代碼文件，即可查看到剛才鏈接的可視化圖表效果。如下所示：

只能打開生成的文件夾中的對應頁面html文件，才能看到圖表。

如果從Axure源文件直接點擊右上角的【預覽】按鈕，是無法看到的。出現如下的情況：

教程源文件

百度云教程源文件：https://pan.baidu.com/s/1RRbsnVCp-CstfNL7iG5ILw

提取碼: ei5r

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議