【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.pswp.cn/news/907432.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Relooking:损失权重λ 、梯度权重α、学习率η

一般多任务,大家都喜欢叠加很多损失,由此产生很多损失权重系数。此外,有的学者直接对梯度进行操作。咋一看,上面三个系数貌似重复多余,直接用其中一个系数代替不行吗?为此,回顾了下神经网络的前…

数学复习笔记 20

复习方程组,还有随便复习一下高数和矩阵,向量。现在是复习高数的导数这一章。两个曲线相切,列出方程,然后解出参数,没有任何难度呢。算切线方程,就是,算导数,导数就用导数定义&#…

Sqlalchemy 连mssql坑

连接失败: (pyodbc.OperationalError) (08001, [08001] [Microsoft][ODBC Driver 17 for SQL Server]SSL Provider: [error:0A00014D:SSL routines::legacy sigalg disallowed or unsupported] (-1) (SQLDriverConnect)) (Background on this error at: https://sqlalche.me/e/…

AI大模型学习三十、ubuntu安装comfyui,安装插件,修改返回405 bug,值得一看喔

一、说明 ComfyUI是一个开源的、基于节点的Web应用。它允许用户根据一系列文本提示(Prompt)生成图像。 ComfyUI使用扩散模型作为基础模型,并结合 ControlNet、Lora和LCM低阶自适应等模型,每个工具都由程序中的一个节点表示 二、开…

MySQL(40)如何使用DROP TABLE删除表?

DROP TABLE 语句用于从数据库中永久删除一个表及其所有数据。执行该语句后,表结构和数据都将被彻底删除,且无法恢复。因此,在执行 DROP TABLE 操作之前,请确保已备份好相关数据。 基本语法 DROP TABLE table_name;如果要删除多个…

element ui 表格 勾选复选框后点击分页不保存之前的数据问题

element ui 表格 勾选复选框后点击分页不保存之前的数据问题 给 el-table上加 :row-key"getRowKey"给type“selection” 上加 :reserve-selection"true"

vite常见面试问题

一、Vite 核心原理 1. Vite 为什么比 Webpack 快? 答案: Vite 的核心优势在于开发环境和生产环境的双重优化: 开发环境: 基于原生 ESM(ES Modules):浏览器直接加载 ES 模块,无需打包,启动时间极短(毫秒级)。按需编译:仅编译当前页面所需的模块,而非整个项目。预…

Screen 连接远程服务器(Ubuntu)

连接 1. 安装screen 默认预安装&#xff0c;可以通过命令查看&#xff1a; screen --version 若未安装&#xff1a; # Ubuntu/Debian sudo apt-get install screen 2. 本机连接远程服务器 ssh root192.168.x.x 在远程服务器中打开screen&#xff1a; screen -S <nam…

Flutter GridView网格组件

目录 常用属性 GridView使用配置 GridView.count使用 GridView.extent使用 GridView.count Container 实现列表 GridView.extent Container 实现列表 GridView.builder使用 GridView网格布局在实际项目中用的也是非常多的&#xff0c;当我们想让可以滚动的元素使用矩阵…

Jenkins实践(8):服务器A通过SSH调用服务器B执行Python自动化脚本

Jenkins实践(8):服务器A通过SSH调用服务器B执行Python自动化脚本 1、需求: 1、Jenkins服务器在74上,Python脚本在196服务器上 2、需要在服务器74的Jenkins上调用196上的脚本执行Python自动化测试 2、操作步骤 第一步:Linux Centos7配置SSH免密登录 Linux Centos7配置S…

C#二维码:利用 ThoughtWorks.QRCode 库实现二维码生成与解析

C#二维码&#xff1a;利用 ThoughtWorks.QRCode 库实现二维码生成与解析 在当今数字化信息交互频繁的时代&#xff0c;二维码凭借其信息容量大、容错能力强、易识别等特点&#xff0c;广泛应用于各个领域。从移动支付、产品溯源到活动签到&#xff0c;二维码无处不在。在 C# 开…

【Java Web】速通JavaScript

参考笔记:JavaWeb 速通JavaScript_javascript 速通-CSDN博客 目录 一、JavaScript快速入门 1. 基本介绍 2. JavaScript特点 3. JavaScript的引入方式(重要) 3.1 写在script标签中 ​​​​​3.2 以外部文件方式引入 二、JS的数据类型 1. 变量 2. 常用数据类型 3.特殊值 三、…

Python打卡训练营-Day13-不平衡数据的处理

浙大疏锦行 知识点&#xff1a; 不平衡数据集的处理策略&#xff1a;过采样、修改权重、修改阈值交叉验证代码 过采样 过采样一般包含2种做法&#xff1a;随机采样和SMOTE 过采样是把少的类别补充和多的类别一样多&#xff0c;欠采样是把多的类别减少和少的类别一样 一般都是缺…

Mac OS 使用说明

Mac 的启动组合键 了解可通过在启动时按住一个或多个按键来访问的 Mac 功能和工具。 若要使用这些组合键中的任何一个&#xff0c;请在按下电源按钮以开启 Mac 后或在 Mac 开始重新启动后&#xff0c;立即按住相应按键。请一直按住&#xff0c;直至电脑出现对应的行为。 !!!上…

LoadRunner 是什么

LoadRunner 是一款由 Micro Focus&#xff08;原惠普企业软件部门&#xff09;开发的性能测试工具&#xff0c;广泛应用于软件、应用程序和系统的 负载测试、压力测试 和 性能分析。它通过模拟大量用户并发操作&#xff0c;帮助测试人员评估系统在高负载下的性能、稳定性和可扩…

RISC-V PMA、PMP机制深入分析

1 PMA PMA&#xff08;Physical Memory Attributes&#xff09;&#xff0c;物理内存属性&#xff0c;顾名思义就是用来设置物理内存属性的&#xff0c;但这里说“设置”&#xff0c;并不合理&#xff0c;因为一般情况下各存储的属性&#xff0c;在芯片设计时就固定了&#xf…

SQL正则表达式总结

这里写目录标题 一、元字符二、正则表达函数1、 regexp_like(x,pattern[,match_option])2、 regexp_instr(x,pattern[,start[,occurrence[,return_option[, match_option]]]]) 3、 REGEXP_SUBSTR(x,pattern[,start[,occurrence[, match_option]]]) 4、 REGEXP_REPLACE(x,patter…

Shortest path 代码

Project https://graphics.cs.utah.edu/research/projects/shortest-path-to-boundary/ Build and Debug Fork:(在Win10上&#xff09; https://github.com/chunleili/Shortest-Path-to-Boundary-for-Self-Intersecting-Meshes commit hash d3160168d2b6a58188d12e6cd959da…

AMBA总线家族成员

在AMBA总线协议体系中&#xff0c;AXI4虽然是最新且性能最强的总线协议&#xff0c;但AHB和APB仍然被广泛使用&#xff0c;主要原因在于​​场景适配性、资源优化和系统兼容性​​的综合考量。以下是具体分析&#xff1a; AMBA 1‌&#xff1a;仅包含ASB和APB1。‌AMBA 2‌&am…

前端高频面试题1:HTML/CSS/浏览器/计算机网络

目录 1.为什么会出现margin塌陷&#xff1f; 2.如何解决margin塌陷&#xff1f; 3.HTML5有哪些新特性&#xff1f; 4.常见的语义化标签有哪些&#xff1f;语义化标签的好处&#xff1f; 5.使用css和js做动画有何优劣 6.如何实现文本超出展示省略号 7.deep在css中存在吗&…