Axure 插入Echarts图表 火狐 谷歌

谷歌浏览器及内核请对号入座：

（1）Axure画一个矩形，并自定义名称为test

（2）为test增加一个加载时交互

 

 （3）为加载增加一个打开链接事件

（4） 点击fx，在弹出的窗口中，输入javascript伪协议代码，只需要将Echarts代码的option部分拷贝到代码中的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 = {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
			  data: [150, 230, 224, 218, 135, 147, 260],
			  type: 'line'
			}
		]
    };
    if (option && typeof option === 'object'){
       myChart.setOption(option, true);    
	}
}, 1000);

 （5）点击预览在谷歌浏览器就可以直接看到效果

火狐浏览器的铁粉这边请：

（1）Axure画一个矩形，并自定义名称为test

（2）为test增加一个加载时交互

 （3）为加载增加一个打开链接事件

（4） 点击fx，在弹出的窗口中，输入javascript伪协议代码（注意代码中不可以有注释），为啥这么做呢，为了曲线救国。因为火狐浏览器加载时Axure没办法识别setTimeout函数，然后又必须先载入一次echarts.min.js，然后又必须写dom那两句为了故意浏览器报echarts未定义，免得直接跳转到了页面元素了（不信的可以自己试试）。

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

（5）增加一个窗口尺寸变化的交互

 （6）为窗口尺寸变化增加一个打开链接事件

（7） 点击fx，在弹出的窗口中，输入javascript伪协议代码，只需要将Echarts代码的option部分拷贝到代码中的option位置即可（注意代码中不可以有注释）（对比谷歌版去掉了setTimeout函数）

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);
    var dom =$('[data-label=test]').get(0);
    var myChart = echarts.init(dom);
    var option = {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
			  data: [150, 230, 224, 218, 135, 147, 260],
			  type: 'line'
			}
		]
    };
    if (option && typeof option === 'object'){
       myChart.setOption(option, true);    
	}

 （8）加载交互增加一个等待事件，时间可以视echarts.min.js下载需要时间而定。

（9）加载交互增加一个触发事件，事件的名称为刚刚新增的窗口调整交互

 

 （10）点击预览在火狐浏览器就可以直接看到效果