天天看点

Axure怎么利用Echarts做出动态可视化

Axure怎么利用Echarts做出动态可视化

众所周知,axure作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理,今天简单说一下怎么利用axure嵌入Echarts做出动态可视化效果。

方式有几种,今天说一种我感觉比较简单的。

1、首先需要去Apache Echarts下载js插件,Apache Echarts官网

Axure怎么利用Echarts做出动态可视化
Axure怎么利用Echarts做出动态可视化

根据需求选择需要选择的内容,在下方点击下载。

Axure怎么利用Echarts做出动态可视化

2、在axure中新建一个文件,选择一个矩形,生成html文件。

3、找到下载的js插件,复制到生成的html文件,放到echarts\resources\scripts路径下。

Axure怎么利用Echarts做出动态可视化

4、用编辑器(也可以用记事本)打开生成的html文件中的index页面将

放到/body标签下

Axure怎么利用Echarts做出动态可视化

5、在Echarts中找到想用的图,在左侧进行调整,点击下载示例,完成下载

Axure怎么利用Echarts做出动态可视化

6、打开下载的html页面,用编辑器打开,复制script标签下的代码到index页面的/body标签下。

Axure怎么利用Echarts做出动态可视化

7、将复制的script标签下的代码中id值container替换为原型文件中的矩形id。

Axure怎么利用Echarts做出动态可视化

8、预览生成的原型文件就行了。

继续阅读