如何通过图标前端插件完成高级可视化图表?笔者在此给出了详细教程,与大家分享~~
![5aac053cdba767eaa5bf6b5ed5d8e656.png](https://i-blog.csdnimg.cn/blog_migrate/a2bacaef2994a1fea1f322d057f822a8.jpeg)
后台开发中避免不了实现一些可视化的图表,主要制作的方法有四种:Excel表格截图、Axure图形绘制、Axure网页框架和Axure第三方图表元件。
第三个“Axure网页框架”需要结合antv、echarts、HighCharts等前端可视化插件代码。
第四个“Axure第三方图表元件”,是由技术大佬开发的Axhub Charts图表元件。但是图表的元件数有限,适合快速搭建简单的图表,但是无法满足我们更复杂的图表设计。
因此,想要更高级的可视化图表还是需要通过第三种方法实现。接下来,给大家详细讲解具体方法(此教程以echarts为例):
ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
具体实现方法
第一步
从左侧【元件库】拉入一个【内联框架】作为可视化图表的载体。如下所示:
![ac5cc1c6b617da53e3acd981d1c3f58e.png](https://i-blog.csdnimg.cn/blog_migrate/bc088878f1eed11e9051a2c35cad9701.jpeg)
第二步
1. 浏览器打开echarts的可视化图表官网链接地址:https://www.echartsjs.com/examples/zh/index.html
2. 选择符合你要求的可视化图表,点击进入编辑运行页面:此教程以这个复杂的可视化案例讲解,链接如下:https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest
图形如下所示:
![8fd365e4802a3a0d468ba50b327b5505.png](https://i-blog.csdnimg.cn/blog_migrate/116e74ae8cd52fb39b4769c686718a94.jpeg)
点击右下角的【Download】将图表的前端代码下载下来,文件为pie-nest.html。再将此文件放在Axure源文件之前发布生成文件夹里面,如下所示:
![bb0d5a29201b4ca40799735835ea9afa.png](https://i-blog.csdnimg.cn/blog_migrate/53385abeb484ecd0865be758b722234b.jpeg)
你可以在代码编辑器中修改成自己想要的数据指标以及数据项;
3. 双击【内联框架】,选择下面的【链接到url或文件】的选项,并将pie-nest.html链接输入进去。如下所示:
![255e1fd47539c37bb89557fd1abd365a.png](https://i-blog.csdnimg.cn/blog_migrate/04f02b125f94c9934a9d61d4a0e55efb.jpeg)
第三步
双击文件夹中的index代码文件,即可查看到刚才链接的可视化图表效果。如下所示:
![da892a85ed6727b99c323f9e1805e028.png](https://i-blog.csdnimg.cn/blog_migrate/6cf11d8a3f23360e021646d38e8cfef1.jpeg)
只能打开生成的文件夹中的对应页面html文件,才能看到图表。
如果从Axure源文件直接点击右上角的【预览】按钮,是无法看到的。出现如下的情况:
![92a5dd54f0b3f8ff48d0cf7583f1129d.png](https://i-blog.csdnimg.cn/blog_migrate/6ca8df1b9086e644bf1c9a537e753ae4.jpeg)
教程源文件
百度云教程源文件:https://pan.baidu.com/s/1RRbsnVCp-CstfNL7iG5ILw
提取码: ei5r
作者:火星人~艾斯,公众号:艾斯的Axure峡谷
本文由 @火星人~艾斯 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议