【Axure结合Echarts绘制图表】
1.绘制一个矩形,用于之后存放图表,将其命名为test:
2.新建交互 -> 载入时 -> 打开链接:
3.链接到URL或文件路径:
4.点击fx:
5.输入:
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);
注意输入内容不能包含中文;矩形名称为test,如果是其他名字要将data-label=test
改成其他名字。
代码解释:
javascript:
//引入ECharts库
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);//获取插入的矩形框对象,test是上面取得名字,如果是其它名字,则进行替换//这里用了定时器来延迟图表载入时间,测试时发现刚引入ECharts库就执行图形代码可能会出错。setTimeout(function(){//获取插入的test矩形框,作为图表绘制的容器,如果前面矩形框为其它名字,则test改为对应的名字var dom =$('[data-label=test]').get(0);//初始化var myChart = echarts.init(dom);var option = {/*在此处粘贴ECharts官网的示例代码*/};//设置数据if (option && typeof option === "object"){myChart.setOption(option, true); }}, 800);
6.在echarts官网找到需要的图表代码,将下面option的这段代码替换上述代码的 var option = {};
7.保存原型并预览即可: