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.rhkb.cn/news/143617.html

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

相关文章

WorkPlus私有化部署IM即时通讯平台,构建高效安全的局域网办公环境

随着数字化转型的加速,政府机构与企业对高效、安全的即时通讯和协作工具的需求日益增长。企业微信和钉钉作为当前市场上较为常见的通讯工具,虽然在一定程度上满足了企业内部协作的需求,但仍存在一些问题,如数据安全性、私有化部署…

静态路由+BFD实例

项目拓扑与项目需求 项目需求 ① 主链路为电信,电信链路出故障时,业务数据流量切换到联通链路 实验步骤 步骤1:设备重命名以及IP地址的配置 设备 接口编号 IP地址 AR1 G0/0/0 10.0.13.1/24 G0/0/1 10.0.14.1/24 AR2 G0/0/0 10.0…

IntelliJ IDEA快速查询maven依赖关系

1.在Maven窗口中点击Dependencies->show Dependencies 2.得到依赖关系图 此时原有快捷键Ctrlf可以查询jar包,如果没有查询菜单出来则设置快捷键方式为 File->Settings->Keymap->搜索栏输入find->在Main Menu下Edit下Find下Find双击算则Add keyboard…

项目任务管理上的一些总结

1. 开发任务管理现状: 1:基于禅道进行任务派发,缺少任务统计,进度上只能以“来不及”、“进度正常”、“进度延后”等模糊字眼。 2:“感觉”工作效率不高了,工作量是否饱和,任务投入产出偏差多…

vue3中$refs使用调整

前言: vue3环境 在vue2环境中,可以直接通过this.$refs获取模块;在vue3环境中,通用以下两种方式获取: 1、通过声明ref进行获取; import { ref} from vue; const logoForm ref(); console.log(logoForm.va…

NSDT孪生场景编辑器系统介绍

一、产品背景 数字孪生的建设流程涉及建模、美术、程序、仿真等多种人才的协同作业,人力要求高,实施成本高,建设周期长。如何让小型团队甚至一个人就可以完成数字孪生的开发,是数字孪生工具链要解决的重要问题。考虑到数字孪生复杂…

go语言unsafe.Pointer与uintptr

以下内容来源go语言圣经 1、unsafe.Pointer,相当于c语言中的void *类型的指针,如果需要运算需要转成uintptr类型的指针 2. uintptr uintptr是一个无符号的整型,它可以保存一个指针地址。 它可以进行指针运算。 uintptr无法持有对象, GC不把…

急救车工业路由器应用提升急救效率:车联网、数据采集与远程诊疗

急救车作为医院里医疗急救过程中的重要组成部分,在智慧医疗物联网领域中急救车应用4G工业路由器实现网络部署与数据采集,通过工业4G路由器能够实时采集到病患的生理数据、救护现场音频与视频、GPS定位以及车辆运行状态等重要信息。这些数据将被传输到医疗…

分布式任务调度平台——XXL-JOB

目录 1.概述1.1.什么是任务调度?1.2.为什么需要分布式调度1.3 XXL-JOB 介绍1.3.1.概述1.3.2.✨系统架构图1.3.3.✨设计思想1.3.4.✨执行流程 2.快速入门2.1.下载源码2.2.初始化调度数据库2.3.编译源码2.4.配置部署调度中心2.4.1.调度中心配置2.4.2.部署项目 2.5.配置…

Java 并发编程面试题——BlockingQueue

目录 1.什么是阻塞队列 (BlockingQueue)?2.BlockingQueue 有哪些核心方法?3.BlockingQueue 有哪些常用的实现类?3.1.ArrayBlockingQueue3.2.DelayQueue3.3.LinkedBlockingQueue3.4.PriorityBlockingQueue3.5.SynchronousQueue 4.✨BlockingQu…

java项目值水果销售管理网站(ssm源码+文档)

项目简介 水果销售管理网站实现了以下功能: 管理员:主页、个人中心、用户管理、水果信息管理、水果类别管理、销售单位管理、水果销售分析管理、会员分析管理、系统管理、订单管理。用户前台:首页、水果信息、新闻资讯、我的、跳转到后台、…

我用PYQT5做的第一个实用的上位机项目(二)

从这篇开始,复盘整个的过程,做一个记录。 首先,制作一些自定义的常用部件,原生的部件很粗糙。 一、按钮的图片资源:用绘图软件(例如AI、coreldraw、PS等,看自己的熟悉程度)制作按钮…

2009-2018年各省涉农贷款数据(wind)

2009-2018年各省涉农贷款数据(wind) 1、时间::209-2018年 2、范围:31省 3、来源:wind 4、指标:涉农贷款 指标解释 :在涉农贷款的分类上,按照城乡地域将涉农贷款分为农村贷款和城…

新手程序员怎么接单?

程序员如何在自己年富力强的时候,最大化发挥自己的能力?将超能力转化为“钞能力”? 有人还在苦哈哈当老黄牛,一身使不完的牛劲,有人已经另辟蹊径,开创了自己的一片致富小天地。 接单找兼职,就…

springcloud之微服务简介

写在前面 本文看下微服务的基础内容,并对springcloud做一个简单的介绍。 1:为什么需要微服务 记得工作的前五六年,项目基本上都是一个大的单体应用,大家都是在同一个分支开发以及提交代码,如下图是之前一个单体应用…

【小余送书第一期】《数据要素安全流通》参与活动,即有机会中奖哦!!

目录 1、背景介绍 2、本书编撰背景 3、本书亮点 4、本书主要内容 5、活动须知 1、背景介绍 随着大数据、云计算、人工智能等新兴技术的迅猛发展,数据已经成为我国经济社会发展的五大生产要素之一,《网络安全法》《个人信息保护法》《数据安全法》的…

Jmeter+Ant+Git+Jenkins持续集成介绍

【软件测试面试突击班】如何逼自己一周刷完软件测试八股文教程,刷完面试就稳了,你也可以当高薪软件测试工程师(自动化测试) 一 简介 1.什么是ant? ant是构建工具 2.什么是构建 概念到处可查到,形象来说&#xff…

【NLP的Python库(04/4)】:Flair

一、说明 Flair是一个现代的NLP库。从文本处理到文档语义,支持所有核心 NLP 任务。Flair使用现代转换器神经网络模型来完成多项任务,并结合了其他Python库,可以选择特定的模型。其清晰的API和注释文本的数据结构,以及多语言支持&a…

[C]精炼分析状态机FSM

FSM:finite state machine 【有限状态机】,用通俗的语言来表达就是逻辑流程图。 当前状态满足触发条件时,就会切换到下一个状态,并执行对应的任务操作。传统代码做法是用if-else 或者 switch-case来处理。若要做到可扩展性良好的…

正确设置PyTorch训练时使用的GPU资源

背景: 最近在使用Hugging Face的transformers api来进行预训练大模型的微调,机器是8卡的GPU,当我调用trainer.train()之后,发现8个GPU都被使用了,因为这个机器上面还有其他人跑的模型,当我进行训练的时候&…