Axure插入echarts和Highcharts图表

第一步，在Axure创建一个矩形，取名字

第二步，对矩形添加交互，选择载入时，选择链接到URL或文件路径

第三步，打开Echarts或Highcharts官网

Echarts：在官网中打开示例，选择你想要的图形，点击~

然后在代码编译器中加入以下代码：其中  var dom =$('[data-label=test]').get(0);中的test 为Axure矩形的名字。

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

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

Echarts完整代码：(建议先在代码编译器写好代码，在放入Axure中)

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=Highchartsbingtu]').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);

效果：

Highcharts：

也是同样的道理，只是代码不同。把复制的代码放入function HighchartsInit方法体中。

javascript:
$.getScript('http://cdn.highcharts.com.cn/highcharts/highcharts.js',function(){
     var dom =$('[data-label=Charts]').get(0);
     HighchartsInit(dom)
}
);
 
function HighchartsInit(dom)
{
 
});
}

注意：Highcharts代码，把'container'改成dom,两边的引号也要去掉;

最终代码：

javascript:
$.getScript('http://cdn.highcharts.com.cn/highcharts/highcharts.js',function(){
     var dom =$('[data-label=Highchartsbingtu]').get(0);
     HighchartsInit(dom)
}
);
 
function HighchartsInit(dom)
{
Highcharts.chart(dom, {
     chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie'
     },
     title: {
          text: '2018 年浏览器市场份额'
     },
     tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
     },
     plotOptions: {
          pie: {
               allowPointSelect: true,
               cursor: 'pointer',
               dataLabels: {
                    enabled: false
               },
               showInLegend: true
          }
     },
     series: [{
          name: 'Brands',
          colorByPoint: true,
          data: [{
               name: 'Chrome',
               y: 61.41,
               sliced: true,
               selected: true
          }, {
               name: 'Internet Explorer',
               y: 11.84
          }, {
               name: 'Firefox',
               y: 10.85
          }, {
               name: 'Edge',
               y: 4.67
          }, {
               name: 'Safari',
               y: 4.18
          }, {
               name: 'Other',
               y: 7.05
          }]
     }]
});
}

 效果：

 

 

 

 

转载：https://blog.youkuaiyun.com/ldy597321444/article/details/123064822?utm_medium=distribute.pc_feed_v2.none-task-blog-personrec_tag-4.pc_personrecdepth_1-utm_source=distribute.pc_feed_v2.none-task-blog-personrec_tag-4.pc_personrec