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.csdn.net/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