Axure嵌入Echarts图表--javascript (js)注入

前言

用Axure做Web原型设计时，经常会有图表。特别是大屏可视化或者数据可视化的原型中就更为常见。传统的方法是通过既有的图形或者曲线加上文字来实现。由于Axure可以通过javascript注入 的方法进行简单的拓展，而echarts作为流行的Web图表工具，接下来简单讲下如何通过javascript 引用Echarts实现图表设计。
本文原始地址： https://www.sima.link/axure嵌入图表之echarts图表/ ‎

Echarts图形生成

在Echarts的官网上实现出想要的图表设计如下图,并复制出来。

Axure 引用

1、在axure界面里拖入矩形，并命名为“Charts” （可以自己定义名称，但要与js代码【data-label】里的一致)。

2、增加交互事件，【载入时】打开链接，【超链接到】写入javascript 的代码实现echarts的引用，如下图

通过axure自身的axutils.js实现js加载，其中javascript 的代码如下：

javascript:
$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
setTimeout(function(){
    var dom =$('[data-label=Charts]').get(0);/*矩形的名字要一致，默认写了Charts*/
    var Chart = echarts.init(dom);
    
    var option = {
    /*echarts的代码写在这里*/
};
    
    if (option && typeof option === "object"){
       Chart.setOption(option, true);    
    }}, 1000);

3、点击预览就可看到引用ehcarts的效果

其他问题

1、 “Uncaught TypeError: Cannot read property ‘getAttribute’ of undefinedat echart”出现这个问题时：
a、Axure矩形的名字与js代码里的矩形名称（data-label）的名字不一样；
b、由于Axure矩形（div）还没有加载完成，可以做定时器的时间加长点（上边的代码是1000ms）
2、VM54:1 Uncaught ReferenceError: echarts is not defined
a、由于网络原因eharts.min.js,还没有加载完在，就开始加载js代码，所以会报这个错，可以做定时器的时间加长点（上边的代码是1000ms）
3、unexpected end of input
a、很可能是你javascript 里有注释用到了“//”，要去掉，只能用/**/。