当前位置：首页 > article >正文

【Axure结合Echarts绘制图表】

article 2025/9/4 19:59:29

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