产品-Axure9（英文版），使用Echarts动态表格

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中的内容,同上进行应用.