文章目录

• 1、实例
• 2、操作
• 更新1
• • Set Timeout 形式的详细应用
• 更新2
• • 引入的源需要更换，之前的无法访问

1、实例

制作原型时，会需要很多图标，无需手动画，可以使用echarts在线编辑好（也可脱机），直接导入到axure.

2、操作

这是引入Echarts库的代码文件（注释版）

 javascript://引入ECharts库var script = document.createElement('script');script.type = "text/javascript";script.src  ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";document.head.appendChild(script);//获取插入的矩形框对象，test是上面取得名字，如果是其它名字，则进行替换//这里用了定时器来延迟图表载入时间，测试时发现刚引入ECharts库就执行图形代码可能会出错。setTimeout(function(){//获取插入的test矩形框，作为图表绘制的容器,如果前面矩形框为其它名字，则test改为对应的名字`var dom =$('[data-label=test]').get(0);//初始化`var myChart = echarts.init(dom);var option = {/*在此处粘贴ECharts官网的示例代码*/};//设置数据if (option && typeof option === "object"){myChart.setOption(option, true);}}, 800);`

以下为无注释版本，插入到axure中时，为了简洁，已经熟悉的人可以使用无注释版本

 javascript:var script = document.createElement('script');script.type = "text/javascript";script.src  ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";document.head.appendChild(script);setTimeout(function(){var dom =$('[data-label=test]').get(0);var myChart = echarts.init(dom);var option = {};if (option && typeof option === "object"){myChart.setOption(option, true);}}, 800);

在axure 中操作，画一个矩形框要命名（实例中的命名为test）。用来放置图表。

进入官网网址 → 在线编辑好 ，复制代码，

选择test矩形框，LOADED时候（或自行选择其他交互），open link --link to external URL --fx() 进行编辑 ，将上述代码插入，在var option 处进行替换

tips： 如果希望进行脱机运行，将echarts.min.js（官网下载） 放置axure/DefaultSettings/Prototype_Files/resources/scripts文件中，同时需要在引用代码中改为script.src =”resources/scripts/echarts.min.js”即可

更新1

在官网,会遇到,代码开头不是option,例如settimeout

这是因为通过axure自身的axutils.js实现echarts.js加载，由于通过js加载不知道什么时间加载完，因此要用setTimeout做个延迟函数,如果想省事,可以直接复制下面option中的内容,同上进行应用.

Set Timeout 形式的详细应用

模板代码是这样的

 javascript:var script = document.createElement('script');script.type = "text/javascript";script.src  ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";document.head.appendChild(script);setTimeout(function(){var dom =$('[data-label=test]').get(0);var myChart = echarts.init(dom);var option = {};if (option && typeof option === "object"){myChart.setOption(option, true);}}, 800);

这是set timeout 开头的形式图标

在axure中输入模板代码，记得改test的名称

将红框中的内容，全部替换为set timeout 的内容，到此完成，顺利加载

更新2

引入的源需要更换，之前的无法访问

更换新的

https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.jshttps://cdn.staticfile.org/echarts/4.3.0/echarts.min.js (国内的)https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.jshttps://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！