Axure 使用 Apache ECharts 展示表格

在网上搜索一番，知道了大概的方法。但总是无法展示出来。一开始是报错，观察之后发现是 JS 基础语法问题，我改错了东西。修复后，发现又提示 echart is not defined。最后没办法，把 echart.js 改成 echart.min.js，还真显示出来了。

我理解的 echart.min.js 只是把 echart.js 做了压缩，不应该出现这种问题啊。但修改成 echart.min.js 后的确能显示出图表了。思索一番，应该是 echart.js 比较大的缘故，在下载好 echart.js 之前，函数就被执行了。多刷新几次使用 echart.min.js 的页面，发现的确还是有时候没加载出来，也报错 echart is not defined.

再回过头观察网上给出的代码：

setTimeout(function () {
  // code
}, 800)

用的是延时执行图表相关代码的方法。延时自然是不可控的。所以我尝试换一种写法，将延时函数改为页面加载完全之后再执行图表：

window.onload = (event) => {
  // code
}

这样修改之后，果然不论怎么刷新，都能正常展示，换成 echart.js 也没问题了。尽管我也不知道是不是瞎猫撞见死耗子，但看起来问题解决。完整代码如下：

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "resources/scripts/echarts.min.js";
document.head.appendChild(script);
window.onload = (event) => {
  var dom = $('[data-label=uvpv]').get(0);
  var myChart = echarts.init(dom);
  var option = {
    // 在 Apache Echart 网站设置的参数；
  };

  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }
}

具体如何在 Axure 中使用 Echart.js 或执行类似的 JS 代码，可参考：

关于Axure中引入Echarts图表的几种方式 – Axure中文学习网