IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    Axure 使用 Apache ECharts 展示表格

    Fish发表于 2024-06-24 11:01:14
    love 0

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



沪ICP备19023445号-2号
友情链接