Axure RP9 引入eCharts图表

一、 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.mzph.cn/news/90633.shtml

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

相关文章

CSS详细基础(五)选择器的优先级

本节介绍选择器优先级,优先级决定了元素最终展示的样式~ 浏览器是通过判断CSS优先级,来决定到底哪些属性值是与元素最为相关的,从而作用到该元素上。CSS选择器的合理组成规则决定了优先级,我们也常常用选择器优先级来合理控制元素…

API文档搜索引擎

导航小助手 一、认识搜索引擎 二、项目目标 三、模块划分 四、创建项目 五、关于分词 六、实现索引模块 6.1 实现 Parser类 6.2 实现 Index类 6.2.1 创建 Index类 6.2.2 创建DocInfo类 6.2.3 创建 Weight类 6.2.4 实现 getDocInfo 和 getInverted方法 6.2.5 实现 …

libopenssl 实现私钥加密公钥解密

在需要验证可信来源时,需要用到签名验签。因此,需要使用私钥加密,公钥解密,取得被加密的信息。这就会使用到私钥加密,公钥解密的场景了。 参考: https://github.com/openssl/openssl/issues/20493 https:/…

Bug:elementUI样式不起作用

前端问题合集:VueElementUI 1. Vue引用Element-UI时,组件无效果解决方案 前提: 已经安装好elementUI依赖 //安装依赖 npm install element-ui //main.js中导入依赖并在全局中使用 import ElementUI from element-ui Vue.use(ElementUI)如果此…

C++标准模板库STL——list的使用及其模拟实现

1.list的介绍 list的文档介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。 2. list的底层是双向链表结构,双向链表中每个元素存储在互不相关的独立节点中,在节点中通过指针指向 其前一个…

怎么保护苹果手机移动应用程序ipa中文件安全?

目录 前言 1. 对敏感文件进行文件名称混淆 2. 更改文件的MD5值 3. 增加不可见水印处理 3. 对html,js,css等资源进行压缩 5. 删除可执行文件中的调试信息 前言 ios应用程序存储一些图片,资源,配置信息,甚至敏感数…

【AI绘画】Stable Diffusion WebUI

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

springboot实现ACL+RBAC权限体系

本文基于web系统的权限控制非常重要的前提下,从ALC和RBAC权限控制两个方面,介绍如何在springboot项目中实现一个完整的权限体系。 源码下载 :https://gitee.com/skyblue0678/springboot-demo 序章 一个后台管理系统,基本都有一套…

Flutter 基本概念

Flutter 可用于开发 mobile, desktop, backend, Or compile to JavaScript for the web. PATH 环境变量 PATH 环境变量 - 知乎 一文搞懂Path环境变量 “环境变量”和“path环境变量”其实是两个东西! 环境变量:是操作系统提供给应用程序访问的简单 key / value字符串;windo…

棒球元宇宙的未来·棒球9号位

棒球元宇宙内容发展规划 1. 棒球元宇宙内容需求 分析现有棒球元宇宙内容缺口和痛点 在棒球运动中,元宇宙有着广阔的发展前景,但也存在着一些问题和挑战。其中最主要的问题之一是缺乏高质量、丰富多样的棒球元宇宙内容。现有的棒球元宇宙平台大多只提供…

C- 一个程序引发的问题

C程序如下&#xff1a; #include <stdio.h> #include <string.h> #include <stdlib.h>struct student_t {char *id;char *name;char *score; };typedef struct student_t *Student_t;void print_stu_info(Student_t stu) {printf("%s %s %s\n",…

【图像处理】SIFT角点特征提取原理

一、说明 提起在OpenCV中的特征点提取&#xff0c;可以列出Harris&#xff0c;可以使用SIFT算法或SURF算法来检测图像中的角特征点。本篇围绕sift的特征点提取&#xff0c;只是管中窥豹&#xff0c;而更多的特征点算法有&#xff1a; Harris & Stephens / Shi–Tomasi 角点…

【面试题】2023前端面试真题之JS篇

前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 表妹一键制作自己的五星红旗国庆头像&#xff0c;超好看 世界上只有一种真正的英雄主义&#xff0c;那就是看清生活的真相之后&#xff0c;依然热爱生活。…

成为威胁:网络安全中的动手威胁模拟案例

不断变化的网络威胁形势要求组织为其网络安全团队配备必要的技能来检测、响应和防御恶意攻击。然而&#xff0c;在研究中发现并继续探索的最令人惊讶的事情是&#xff0c;欺骗当前的网络安全防御是多么容易。 防病毒程序建立在庞大的签名数据库之上&#xff0c;只需更改程序内…

《The Rise and Potential of Large Language Model Based Agents: A Survey》全文翻译

The Rise and Potential of Large Language Model Based Agents: A Surve - 基于 LLMs 的代理的兴起和潜力&#xff1a;一项调查 论文信息摘要1. 介绍2. 背景2.1 AI 代理的起源2.2 代理研究的技术趋势2.3 为什么大语言模型适合作为代理大脑的主要组件 3. 代理的诞生&#xff1a…

数据库系统课设——基于python+pyqt5+mysql的酒店管理系统(可直接运行)--GUI编程(2)

几个月之前写的一个项目&#xff0c;通过这个项目&#xff0c;你能学到关于数据库的触发器知识&#xff0c;python的基本语法&#xff0c;python一些第三方库的使用&#xff0c;包括python如何将前后端连接起来&#xff08;界面和数据&#xff09;&#xff0c;还有界面的设计等…

神经辐射场(NeRF)2023最新论文及源代码合集

神经辐射场&#xff08;NeRF&#xff09;作为一种先进的计算机图形学技术&#xff0c;能够生成高质量的三维重建模型&#xff0c;在计算机图形学、计算机视觉、增强现实等领域都有着广泛的应用前景&#xff0c;因此&#xff0c;自2020年惊艳亮相后&#xff0c;神经辐射场也成为…

python安装第三方模块方法

正常情况下安装python第三方模块没啥说的&#xff0c;但是由于python安装模块默认是在外网下载安装&#xff0c;牵扯外网网速问题&#xff0c;所以可以配置下使用国内某镜像源来下载模块 python -m pip install xxxxxxxxxxx 和 pip install xxxxxxxxxx 的命令都可下载安装第三…

raw智能照片处理工具DxO PureRAW mac介绍

DxO PureRAW Mac版是一款raw智能照片处理工具&#xff0c;该软件采用了智能技术&#xff0c;以解决影响所有RAW文件的七个问题&#xff1a;去马赛克&#xff0c;降噪&#xff0c;波纹&#xff0c;变形&#xff0c;色差&#xff0c;不想要的渐晕&#xff0c;以及缺乏清晰度。 Dx…

李宏毅机器学习第一课(结尾附作业模型详细分析)

机器学习就是让机器找一个函数f&#xff0c;这个函数f是通过计算机找出来的 如果参数少的话&#xff0c;我们可以使用暴搜&#xff0c;但是如果参数特别多的话&#xff0c;我们就要使用Gradient Descent Regression (输出的是一个scalar数值) Classification &#xff08;在…