Axure如何添加ECharts图表

前面介绍了很多关于Axure画图标的方法，但是做出来的都是静态的效果，没能进行交互，我们都知道ECharts是一款非常精美的图表插件，在开发的过程中也经常会使用到，今天就教大家如何在Axure中添加ECharts图表，实现动态图表效果。

工具/原料

ECharts

方法/步骤

1首先打开Axure,拖入一个矩形。注意调整好矩形的大小，你要显示的图表大小就是矩形的大小，根据实际情况设置，我这里随便拖拽了一个，如果你不懂开发，可以完全按照我做的来。
将做好的页面发布成Html页面。点击发布按钮，将画好的页面发布成Html文件，Axure发布大家应该都会，这里就不做介绍了，如图所示：
下载ECharts的js文件。百度搜索ECharts，找到官网，然后进入，点击下载菜单，如图下载一个js文件，根据需要下载，常用的能够支持绝大多数图表，你也可以下载完整的。
将js文件放到发布文件的“\resources\scripts”目录下。如图所示，不要放错位置，否则找不到文件，无法加载ECharts,就没有办法显示了。
为发布的页面添加Echarts 的JS引入。找到你要嵌入ECharts的页面，使用编辑工具打开，没有的话可以用记事本，但是不推荐，可以下载一个编辑器。打开后，在</body>后面添加“<script src=”resources/scripts/echarts.common.min.js”></script>”
下载你需要嵌入的图标，这里随便找一个折线图为例。点击实例–官方实例，然后找到折线图，点击进入编辑界面。
编辑你要嵌入的折线图，修改数据和标题等，修改完成后点击右下角的Download按钮，下载页面。
下载后用编辑工具打开页面，复制代码，如图所示。注意不要复制多了，只要复制” <script type=”text/javascript”>……</script>“之间的内容。
将复制的内容粘贴到引入js代码的下面。如图所示，不要放错位置，否则由于加载顺序的原因可能导致无法显示。
将矩形的ID复制到图表代码的container替换为矩形的ID。如图所示，我的矩形id是u365_div，所以替换为u365_div，如图所示：
预览查看效果即可。所有的ECharts效果都可以显示，运用的好能够做出以假乱真的原型。END