如何在Axure中嵌入Echarts圖表

ECharts是一款由百度前端技術部開發的,基於Javascript的數據可視化圖表庫,可以流暢的運行在PC和移動設備上,兼容當前絕大部分瀏覽器,底層依賴輕量級的Canvas類庫ZRender,提供直觀,生動,可交互,可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗,賦予了用戶對數據進行挖掘、整合的能力。

簡單點來說,這是一個非常酷炫實用的數據可視化的工具。

下面我們來說說,如何在Axure嵌入Echarts圖表

1. 在Axure新建文件,拖入一個矩形,並命名爲“123”;

2. 生成HTML文件,記住文件所在的路徑(比如G:\My Files\Axure_test),下面需要用到;

3. 進入Echarts官方下載頁面,下載echarts.min.js文件並複製到HTML文件所在文件夾下的resources中的scripts文件夾中(比如:G:\My Files\Axure_test\resources\scripts);

4. 用記事本打開HTML文件所在文件夾下的index.html文件,將echarts.min.js引入到index.html中,複製以下代碼到body中:

<script src="resources/scripts/echarts.min.js"></script>

5. 選擇並下載echarts實例的html文件,用記事本打開;複製以下代碼到index.html中;複製完成後修改container爲index中之前所拖入矩形框的div塊級元素id(本例中是u0_div)。

選擇圖表

點擊右下角download下載源碼

從源碼中複製這段代碼

粘貼代碼並修改container

6. 保存,用瀏覽器打開index.html文件,已經成功載入圖表。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章