axure 引用 echarts图表

操作步骤：

一、新建一个矩形元件

元件命名为 chart1

二、组装js代码：

2.1 组合项

2.1.1 【元件名称】:chart1
2.1.2 【核心配置对象】：

    title: { text: '优化版图表' },
    tooltip: {},
    series: [{
      type: 'pie',
      data: [
        { name: 'A', value: 30 },
        { name: 'B', value: 50 },
        { name: 'C', value: 20 }
      ]
    }]

2.2 代码框架
2.2.1 代码框架优化版(和下方简易版二选一即可)：

javascript:
if (typeof echarts === 'undefined') {
  var script = document.createElement('script');
  script.type = "text/javascript";
  script.src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
  document.head.appendChild(script);
}
setTimeout(function() {
  if (typeof echarts === 'undefined') { 
    alert("ECharts 加载失败，请检查网络！"); 
    return; 
  }
  var dom = $('[data-label="/*此处替换为【元件名称】*/"]').get(0);
  if (!dom) { 
    alert("未找到图表容器！请检查 data-label 是否正确"); 
    return; 
  }
  var myChart = echarts.getInstanceByDom(dom) || echarts.init(dom);
  var option = {
    /*此处替换为【核心配置对象】内容*/
  };
if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }
}, 800);

2.2.2 代码框架简易版(和上方优化版二选一即可)：

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
setTimeout(function() {
  var dom = $('[data-label="/*此处替换为【元件名称】*/"]').get(0);
  var myChart = echarts.init(dom);
  var option = {
    /*此处替换为【核心配置对象】内容*/
  };
if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }
}, 800);

2.3 通过组合项和代码框架形成如下代码：

javascript:
if (typeof echarts === 'undefined') {
  var script = document.createElement('script');
  script.type = "text/javascript";
  script.src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
  document.head.appendChild(script);
}
setTimeout(function() {
  if (typeof echarts === 'undefined') { 
    alert("ECharts 加载失败，请检查网络！"); 
    return; 
  }
  var dom = $('[data-label="chart1"]').get(0);
  if (!dom) { 
    alert("未找到图表容器！请检查 data-label 是否正确"); 
    return; 
  }
  var myChart = echarts.getInstanceByDom(dom) || echarts.init(dom);
  var option = {
    title: { text: '优化版图表' },
    tooltip: {},
    series: [{
      type: 'pie',
      data: [
        { name: 'A', value: 30 },
        { name: 'B', value: 50 },
        { name: 'C', value: 20 }
      ]
    }]
  };
if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }
}, 800);

三、axure操作：

将代码写入到chart1矩形元件的载入事件-打开链接-链接到外部URL，插入fx公式中。

四、预览。