【Axure结合Echarts绘制图表】

1.绘制一个矩形,用于之后存放图表,将其命名为test

2.新建交互 -> 载入时 -> 打开链接:

3.链接到URL或文件路径:

4.点击fx:

5.输入:

js 复制代码
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改成其他名字。

代码解释:

js 复制代码
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.保存原型并预览即可:

相关推荐
RaidenLiu4 小时前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost4 小时前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost4 小时前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost4 小时前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪4 小时前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在4 小时前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方4 小时前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
炒米23334 小时前
【Array】数组的方法
javascript
小猫由里香4 小时前
小程序打开文件(文件流、地址链接)封装
前端
Tzarevich4 小时前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端