Axure RP9 引入eCharts图表

news2024/10/6 8:26:15

一、 ECharts

地址:https://echarts.apache.org/zh/index.html
概述:一个基于 JavaScript 的开源可视化图表库
提供了很多图标样式案例
在这里插入图片描述
在这里插入图片描述

二、 Axure引入eCharts图表步骤

步骤一:打开Axure,添加矩形元素,调整矩形所需大小,并命名,如:chart1

在这里插入图片描述

步骤二:给矩形新建载入时交互

1、选中,矩形,交互选择“载入时–打开链接–链接到URL或文件路径”,
在这里插入图片描述
2、点击“fx”打开设置弹窗,待定
在这里插入图片描述

步骤三:设置eCharts图表代码

1、复制下方代码到记事本,对应红框位置的名称改为矩形名称,“chart1"

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

option = {



};

if (option && typeof option === "object"){
    myChart.setOption(option, true);
}
}, 800);

在这里插入图片描述
2、进入eCharts官网,找到想要的图表,例如这里选择的是玫瑰图,右侧是图表,左侧是代码,写好了右侧图表的展示方式、数据等信息(会JavaScript 的,也可以直接先在这里,修改代码将图表调整为自己所需的样式、数据等)。

将左侧"option = { }"代码全部复制;打开前一步粘贴的记事本,把复制的代码替换红色框选的内容
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

步骤四:将eCharts图表代码添加至交互中

1、将记事本的所有代码复制,回到步骤二打开的“fx”设置弹窗,将代码复制到“插入变量或函数…”方框里,点击“确定”按钮,就完成设置了。

在这里插入图片描述

步骤五:预览查看效果

在这里插入图片描述

分享,多担待。望有帮助

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

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

相关文章

Mybatis 二级缓存

之前我们介绍过映射器与XML配置职责分离,本篇我们在此基础上介绍Mybatis中二级缓存的使用。 如果您对映射器与XML配置职责分离不太了解,建议您先进行了解后再阅读本篇,可以参考: Mybatis 映射器与XML配置职责分离https://blog.c…

轻松解决软件游戏msvcr120.dll丢失问题,msvcr120.dll丢失的修复步骤分享

msvcr120.dll 丢失可能会让许多软件和游戏无法正常运行,给用户带来无尽的困扰。当你尝试打开某个程序时,可能会弹出一个提示框,告诉你缺少 msvcr120.dll 文件。当你尝试运行某个游戏时,可能会遇到无法启动或运行一段时间后崩溃的问…

java项目中数据权限实现思路

一、需求: 同样的页面,不同的账号登录进去,看到的数据不一样。 二、权限管理的方式 RBAC模型 角色与数据权限的关系: 比如管理员角色,他的数据权限是全部,那么拥有该角色的用户,所能看到的数…

基于YOLOv8模型的蜜蜂目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要:基于YOLOv8模型的蜜蜂目标检测系统可用于日常生活中检测与定位蜜蜂目标,利用深度学习算法可实现图片、视频、摄像头等方式的目标检测,另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法训练数据集…

低代码软件:业务经理的利器!快速掌握使用技巧

低代码的出现,让应用开发不再是开发人员的专属工作。要知道在企业中,业务开发压力加上开发人手不够导致开发团队会积压大量请求。不仅拖慢了业务进程,也难免造成开发软对和业务团队之间的矛盾。 而成熟的业务经理在行业中深耕多年&#xff0…

基于PHP+MySQL的家教平台

摘要 设计和实现基于PHP的家教平台是一个复杂而令人兴奋的任务。这个项目旨在为学生、家长和教师提供一个便捷的在线学习和教授平台。本文摘要将概述这个项目的关键方面,包括用户管理、课程管理、支付处理、评价系统、通知系统和安全性。首先,我们将建立…

Golang的测试、基准测试和持续集成

在Golang中,内置的垃圾回收器处理内存管理,自动执行内存分配和释放。 单元测试是软件开发中至关重要的一个方面,它确保了代码的正确性并在开发过程中尽早发现错误。在Go中,编写有效的单元测试非常简单,并为开发人员提…

Mysql8安装+重装的数据备份方法【提供Mysql8.0.27版本的压缩包】

文章目录 Mysql8压缩安装包下载安装流程压缩包解压配置环境变量 初始化数据库连接数据库修改密码Mysql重装/重装系统 的数据库备份方法数据备份数据还原 Mysql8压缩安装包下载 压缩包下载路径 安装流程 压缩包解压 首先将压缩包解压,下图是解压之后的文件目录&a…

Leetcode 71. 简化路径

文章目录 题目代码&#xff08;9.28 首刷调试看解析&#xff09; 题目 Leetcode 71. 简化路径 代码&#xff08;9.28 首刷调试看解析&#xff09; class Solution { public:string simplifyPath(string path) {vector<string> parts;int start 0;for(int i 1; i <…

【C++11保姆级教程】空指针(nullptr),long long类型,char16_t和char32_t类型

文章目录 前言一、空指针(nullptr)1.1概念解释1.2形象比喻1.3示例代码1.4空指针nullptr的优势 二、long long类型2.1概念解释2.2形象比喻2.3示例代码2.4优势2.5劣势 三、char16_t和char32_t类型3.1概念解释3.2形象比喻3.3示例代码3.4优势3.5劣势 总结 前言 在C11标准中引入了许…

C# 数组

C# 数组 数组简单数组多维数组锯齿数组Array类数组的接口枚举 数组 如果需要使用同一类型的多个对象&#xff0c;就可以使用集合和数组。C#用特殊的记号声明和使用数组。 简单数组 在声明数组时&#xff0c;应先定义数组中元素的类型&#xff0c;其后是一个空方括号和一个变…

计算机毕业设计 基于SSM的垃圾分类管理系统(以医疗垃圾为例)的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

高性能MySQL第四版

主要列出与第三版的区别 第一章、MySQL架构 MySQL逻辑架构 左右分别是第三和第四版。 第四版架构图里把第二层的“查询缓存”去掉了&#xff0c;也去掉了对应的文字描述。 连接管理和安全 “每个 客户 端 连接 都会 在 服务器 进程 中 拥有 一个 线程” 第四版对这句话增…

英语——分享篇——每日100词——501-600

hill——will愿意——他不愿意去小山里 Easter——east东方(熟词)er儿(拼音)——东方的儿子都过复活节 exhibition——ex前夫(熟词)hi嗨(熟词)bition比神(谐音)——展览会上前夫很嗨&#xff0c;比神还开心 chase——vt.追捕&#xff0c;追逐&#xff0c;追赶——cha茶se色——…

国庆day1

消息队列 代码 发送 #include<myhead.h> //声明一个消息结构体 typedef struct {long msgtype; //消息类型char data[1024]; //消息正文 }Msg_s; #define SIZE sizeof(Msg_s)-sizeof(long) //消息正文的大小 int main(int argc, const char *argv[]) {key_t key; /…

HashMap底层源码,数据结构

HashMap的底层结构在jdk1.7中由数组链表实现&#xff0c;在jdk1.8中由数组链表红黑树实现&#xff0c;以数组链表的结构为例。 JDK1.8之前Put方法&#xff1a; JDK1.8之后Put方法&#xff1a; HashMap基于哈希表的Map接口实现&#xff0c;是以key-value存储形式存在&#xff0c…

lwip开发指南2

目录 NTP 协议实验NTP 简介NTP 实验硬件设计软件设计下载验证 lwIP 测试网速JPerf 网络测速工具JPerf 网络实验硬件设计软件设计下载验证 HTTP 服务器实验HTTP 协议简介HTTP 服务器实验硬件设计下载验证 网络摄像头&#xff08;ATK-MC5640&#xff09;实验ATK-MC5640 简介SCCB …

wait函数与waitpid函数

1.函数介绍 2.wait函数 #include <sys/types.h> #include <sys/wait.h> pid_t wait(int *wstatus); 功能&#xff1a;等待任意一个子进程结束&#xff0c;如果该子进程结束了&#xff0c;此函数会回收子进程的资源 参数&#xff1a; -int *wstatus&#xff1a;…

26602-2011 工业用2-吡咯烷酮 知识梳理

声明 本文是学习GB-T 26602-2011 工业用2-吡咯烷酮. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了工业用2-吡咯烷酮的要求、试验方法、检验规则以及标志、包装、运输和贮存等。 本标准适用于γ-丁内酯和氨合成制得的2-吡咯烷酮…

MySQL Installer is running in Community mode

每天很准时的弹出&#xff1a; 这是由于检查MySql并且更新的一个定时任务&#xff0c;没有更新成功导致 解决办法&#xff1a;禁用定时任务 1.先关闭错误框 2.打开控制面板 &#xff0c;使用小图标查看 3. 打开管理工具&#xff0c;双击打开任务计划程序 4.双击进入&#xf…