当前位置: 首页 > news >正文

【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.保存原型并预览即可:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/214698.html

相关文章:

  • “安康杯”安全生产知识竞赛活动流程方案
  • ATPrompt方法:属性嵌入的文本提示学习
  • 本周 edu教育邮箱注册可行方案
  • 车载通信网络 --- 传统车载网络及其发展
  • 【C++高级主题】异常处理(四):auto_ptr类
  • C++异步日志系统
  • 力扣 155.最小栈
  • sqli-labs第二十七关——Trick with selectunion
  • Queue 与 Deque 有什么区别?
  • 人工智能第一币AISPF,首发BitMart交易所
  • C++笔记-哈希表
  • etcd之etcd curl命令(七)
  • 《反事实棱镜:折射因果表征学习的深层逻辑》
  • AI时代新词-私有数据与AI结合的技术:隐私保护与数据利用的平衡
  • 多头注意力 vs 单头注意力:计算量与参数量区别
  • 游戏行业DDoS防护:基于IP信誉库的实时拦截方案
  • 【数据集】基于ubESTARFM法的100m 地温LST数据集(澳大利亚)
  • 批量转存夸克网盘内容并分享实操教程
  • 002大模型-提示词工程,少样本提示,角色扮演,思维链
  • Axure元件动作七:移动、旋转、启用/禁用效果、置于顶层/底层详解
  • 2025-05-26 什么是“AI 全栈”
  • 离线安装Microsoft 照片【笔记】
  • 通配符滥用详解:Linux命令行的潜在风险
  • 【逆向 | CTF】攻防世界 Reversing-x64Elf-100 二次解密
  • 第1章第1节:安全运维基础思维与体系建设-安全运维的定义与核心目标
  • 题目 3331: 蓝桥杯2025年第十六届省赛真题-LQ 图形
  • 遥感四十号 02 组卫星发射成功遥感科普:电磁环境探测
  • esp8266 点灯科技远程控制继电器
  • C/C++---类型转换运算符
  • 嵌入式开发STM32 -- 江协科技笔记