Axure11 嵌入Echarts图表–javascript

前言

本档是基于Axure11版本下完成的，以下的操作或相关的代码可能在其他版本下不适用

一、Echarts图形生成

用Axure11做Web原型设计时，经常会引用到图表，特别是大屏可视化或者数据可视化的原型中就更为常见。传统的方法是通过既有的图形或者曲线加上文字来实现，但是相关操作或修改时比较麻烦。由于Axure11可以通过javascript注入 的方法进行简单的拓展，而echarts作为流行的Web图表工具，两者通过结合集成，可以实现更加快速、复杂、美观的图表界面。

二、操作使用步骤

1.Echarts图形生成

在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引用

1、在Axure界面里拖入矩形，并命名为“Charts” （可以自行定义名称，但要与JS代码【data-label】里的一致）；增加交互事件，【载入时】打开链接，【超链接到】写入javascript 的代码实现echarts的引用，如下图

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的代码写在这里*/
 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'
    }
  ]
};
    if (option && typeof option === "object"){
       Chart.setOption(option, true);
    }}, 1000);

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