如何通過(guò)圖標(biāo)前端插件完成高級(jí)可視化圖表？筆者在此給出了詳細(xì)教程，與大家分享~~

后臺(tái)開(kāi)發(fā)中避免不了實(shí)現(xiàn)一些可視化的圖表，主要制作的方法有四種：Excel表格截圖、Axure圖形繪制、Axure網(wǎng)頁(yè)框架和Axure第三方圖表元件。

第三個(gè)“Axure網(wǎng)頁(yè)框架”需要結(jié)合antv、echarts、HighCharts等前端可視化插件代碼。

第四個(gè)“Axure第三方圖表元件”，是由技術(shù)大佬開(kāi)發(fā)的Axhub Charts圖表元件。但是圖表的元件數(shù)有限，適合快速搭建簡(jiǎn)單的圖表，但是無(wú)法滿(mǎn)足我們更復(fù)雜的圖表設(shè)計(jì)。

因此，想要更高級(jí)的可視化圖表還是需要通過(guò)第三種方法實(shí)現(xiàn)。接下來(lái)，給大家詳細(xì)講解具體方法(此教程以echarts為例)：

ECharts是一款由百度前端技術(shù)部開(kāi)發(fā)的，基于Javascript的數(shù)據(jù)可視化圖表庫(kù)，提供直觀(guān)，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。

具體實(shí)現(xiàn)方法

第一步

從左側(cè)【元件庫(kù)】拉入一個(gè)【內(nèi)聯(lián)框架】作為可視化圖表的載體。如下所示：

第二步

1. 瀏覽器打開(kāi)echarts的可視化圖表官網(wǎng)鏈接地址：https://www.echartsjs.com/examples/zh/index.html

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

圖形如下所示：

點(diǎn)擊右下角的【Download】將圖表的前端代碼下載下來(lái)，文件為pie-nest.html。再將此文件放在A(yíng)xure源文件之前發(fā)布生成文件夾里面，如下所示：

你可以在代碼編輯器中修改成自己想要的數(shù)據(jù)指標(biāo)以及數(shù)據(jù)項(xiàng)；

3. 雙擊【內(nèi)聯(lián)框架】，選擇下面的【鏈接到url或文件】的選項(xiàng)，并將pie-nest.html鏈接輸入進(jìn)去。如下所示：

第三步

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

只能打開(kāi)生成的文件夾中的對(duì)應(yīng)頁(yè)面html文件，才能看到圖表。

如果從Axure源文件直接點(diǎn)擊右上角的【預(yù)覽】按鈕，是無(wú)法看到的。出現(xiàn)如下的情況：

教程源文件

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

提取碼: ei5r

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議

總結(jié)

以上是生活随笔為你收集整理的excel可视化图表插件_Axure 教程：利用图表前端插件实现高级可视化图表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。