在网上搜索一番,知道了大概的方法。但总是无法展示出来。一开始是报错,观察之后发现是 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 代码,可参考: