如何在Axure 9.0 中使用echarts

如何在Axure 9.0 中使用echarts

1. 在需要插入echarts的页面中交互事件 -> 页面载入时 -> 打开链接 ,加入如下代码,插入echats代码。

   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);
   

2. 在页面中拖入矩形元件，并取个名字，比如echart-rect。
3. 在矩形元件echart-rect的交互->载入时->打开链接, 加入如下代码。注意代码中不要带用中文注释。

   javascript:
   setTimeout(function(){
       var dom =$('[data-label=echart-rect]').get(0);
       var myChart = echarts.init(dom);
       
   var option = {
       legend: {},
       tooltip: {},
       dataset: {
           dimensions: ['product', 'Reject', 'Inspected'],
           source: [
               {product: 'HVFA 5',  'Reject': 132, 'Inspected': 1200},
               {product: 'HVFA 1',  'Reject': 80, 'Inspected': 1400},
               {product: 'HVFA 3', 'Reject': 103, 'Inspected': 1250}
           ]
       },
       xAxis: {type: 'category'},
       yAxis: {},
       series: [
           {type: 'bar'},
           {type: 'bar'}
       ]
   };
       
       if (option && typeof option === "object"){
       myChart.setOption(option, true);    
       }
   }, 400);
   
   

4. option 中的代码来至官网中的一个实例，可按需更换。1. 在需要插入echarts的页面中交互事件 -> 页面载入时 -> 打开链接 ,加入如下代码,插入echats代码

   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);
   

5. 在页面中拖入矩形元件，并取个名字，比如echart-rect。
6. 在矩形元件echart-rect的交互->载入时->打开链接, 加入如下代码。注意代码中不要带用中文注释。

   javascript:
   setTimeout(function(){
       var dom =$('[data-label=echart-rect]').get(0);
       var myChart = echarts.init(dom);
       
   var option = {
       legend: {},
       tooltip: {},
       dataset: {
           dimensions: ['product', 'Reject', 'Inspected'],
           source: [
               {product: 'HVFA 5',  'Reject': 132, 'Inspected': 1200},
               {product: 'HVFA 1',  'Reject': 80, 'Inspected': 1400},
               {product: 'HVFA 3', 'Reject': 103, 'Inspected': 1250}
           ]
       },
       xAxis: {type: 'category'},
       yAxis: {},
       series: [
           {type: 'bar'},
           {type: 'bar'}
       ]
   };
       
       if (option && typeof option === "object"){
       myChart.setOption(option, true);    
       }
   }, 400);
   
   

7. option 中的代码来至官网中的一个实例，可按需更换。