1. 首页
  2. 教程
  3. 高级教程

Axure+javascript嵌入图表之Echarts图表

用Axure做Web原型设计时,经常会有图表。特别是大屏或者数据可视化的原型中就更为常见。Axure可以通过javascript注入的方法进行拓展,而Echarts作为流行的Web图表工具,因此下文将简单介绍如何通过javascript引用Echarts实现图表设计。

1、Echarts图形生成

Echarts的官网上实现出想要的图表设计如下图,并复制出来,本文以官网的示例

Axure+javascript嵌入图表之Echarts图表
option = {
    xAxis: {
        type: ‘category’,
        data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
    },
    yAxis: {
        type: ‘value’
    },
    series: [
        {
           data: [150, 230, 224, 218, 135, 147, 260], type: ‘line’
        }
    ]
};

2、Axure 引用

以Axure8为例,Axure9也是类似的操作。

2.1 创建容器

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

Axure+javascript嵌入图表之Echarts图表

2.2 javacript注入

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

Axure+javascript嵌入图表之Echarts图表
2.2.2 javacript编写
方法一
通过axure自身的axutils.js实现echarts.js加载,由于通过js加载不知道什么时间加载完,因此要用setTimeout做个延迟函数。
$axure.utils.loadJS()函数说明参考Axure API 加载js、css文件
其javascript 的代码如下:

javascript:
$axure.utils.loadJS(‘https://cdn.staticfile.org/echarts/4.3.0/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);
    }}, 2000);
方法二
通过jquary加载charts.js,完成后再运行Ehcarts代码,这样加载完成后直接显示,更加顺畅快捷。
其javascript 的代码如下:

javascript:
$.getScript(‘https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js’,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);
    };
}
);
还可以简单改造下,每次只要在ChartsInit函数里写里粘贴ehcarts全部代码就即可,更加方便;
javascript:
.getScript(‘https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js’,function(){
    var dom =(‘[data-label=Charts]’).get(0);/*矩形的名字要一致,默认写了Charts*/
    var Chart = echarts.init(dom);
    var option =ChartsInit();
    if (option && typeof option === “object”){
        Chart.setOption(option, true);
    };
}
);
function ChartsInit() {
    /*echarts的完整代码写在这里*/
    return option
}

2.3效果

点击预览就可看到引用ehcarts的效果(用的是chrome浏览器)

Axure+javascript嵌入图表之Echarts图表

3、其他问题

1、 “Uncaught TypeError: Cannot read property ‘getAttribute’ of undefinedat echart”出现这个问题时:

a、Axure矩形的名字与js代码里的矩形名称(data-label)的名字不一样;

2、unexpected end of input

a、很可能是你javascript 里有注释用到了“//”,要去掉,只能用/**/。

4、Demo文件下载

  • Axure8 demo文件下载链接:

访问密码:8397
  • Axure9 demo文件下载链接:

访问密码:8397

原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/1203.html

发表评论

登录后才能评论

评论列表(2条)

  • Onloker 2022年5月17日 上午11:48

    教程中的代码和原型中的不一样,直接用教程中的代码是不行的

    • 院长大大 回复 Onloker 2022年5月17日 下午6:49

      教程中的代码是个框架,需要填上echarts的代码才有效,可以以原型中的代码为准,那个是可以的

联系我们

在线咨询:点击这里给我发消息

邮件:fleede@163.com

工作时间:周一至周五,9:30-18:30,节假日休息