Axure RP9中使用Echarts示例

1. 在Axure中拖入一个矩形框，并命名tes
   
2. 进入Echarts官网示例页面https://echarts.apache.org/examples/zh/index.html
   
3. 选择自己需要的图表，修改数据，并复制左侧js代码
   
4. 把上面复制的代码替换下方的option={};

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=test]').get(0);
    var myChart = echarts.init(dom);

    var option = {

    };

    if (option && typeof option === "object"){
       myChart.setOption(option, true);
    }}, 800);

替换后结果如下：

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=test]').get(0);
    var myChart = echarts.init(dom);

    var option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

    if (option && typeof option === "object"){
       myChart.setOption(option, true);
    }}, 800);

5. 给Axure中的矩形test添加交互事件：添加载入时交互==》打开链接==》选择链接到url或文件路径===》复制上面的代码到fx中。
   
6. 预览