Axure+echarts实现图表数据体现

背景：在现场与客户沟通中，客户经常需要对一些未上线的内容进行汇报，并且需要使用部分的真实数据来体现效果。为了符合客户汇报的要求，经常需要投入大量的前后端开发来做汇报的demo版本。最后实际是不一定会使用demo版本，这样会造成大量的人力浪费。故研究了是否可以在原型设计的时候，就实现真实数据的来画图标。

因为我是一个从零学起的，尝试了很多的办法和纠结了很久，才成功。写的东西不够专业，请尽量！

实现：通过Axure和echarts的结合，可以实现相应的效果

准备：

1.echarts.min.js echarts的js文件 将该文件放在axure安装目录\DefaultSettings\Prototype_Files\resources 下。这样的好处就是，以后在导出html的时候，不需要再添加js文件到导出文件中。 2.https://echarts.apache.org/zh/index.html 在这个下面使用真实的数据，测试生成需要的代码 3.axure开发工具，我使用的是Axure9.0

步骤

一、在axure中添加一个矩形

二、将这个生成为html文件

三、echarts上修改并且下载你想要的图形

 

四、打开导出的html文件夹，用文本工具打开"测试.html"

五、修改第67行的src，将其修改为"resources/scripts/echarts.min.js"

六、新增<script type="text/javascript"></script>

七、在其中添加上“三”中产生的代码

八、修改 var chartDom = document.getElementById('main');

将main替换成对应的div的id

在导出的html中有两个div 分别是u0_div和U1_div

替换以后的效果如下：

九、点击保存，打开测试.html

十、如果打开html以后，发现无图标生成，极大可能性是准备1为完成。

两个解决办法：

1、在导出的文件加中，找到resources\scripts添加上echarts.min.js

        好处：不需要重新导出html。

        坏处：新导出html以后，还是需要手工添加echarts.min.js

2、重做准备步骤一。