Axure RP9中使用Echarts示例

目录

  1. 在Axure中拖入一个矩形框,并命名tes
    在这里插入图片描述
  2. 进入Echarts官网示例页面https://echarts.apache.org/examples/zh/index.html
    在这里插入图片描述
  3. 选择自己需要的图表,修改数据,并复制左侧js代码
    在这里插入图片描述
  4. 把上面复制的代码替换下方的option={};
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);

替换后结果如下:

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 = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};if (option && typeof option === "object"){myChart.setOption(option, true);}}, 800);
  1. 给Axure中的矩形test添加交互事件:添加载入时交互==》打开链接==》选择链接到url或文件路径===》复制上面的代码到fx中。
    在这里插入图片描述
  2. 预览
    在这里插入图片描述

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

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

相关文章

工作记录------单元测试(持续更新)

工作记录------单元测试 之前的工作中从来没有写过单元测试&#xff0c;新入职公司要求写单元测试&#xff0c; 个人觉得&#xff0c;作为程序员单元测试还是必须会写的 于此记录一下首次编写单元测试的过程。 首先引入单元测试相关的依赖 <dependency><groupId>…

[深度学习入门]PyTorch深度学习[Numpy基础](上)

目录 一、前言二、Numpy概述三、生成Numpy数组3.1 从已有数据中创建数组3.2 利用random模块生成数组3.3 创建特定形状的多维数组3.4 利用arange和linspace函数生成数组 四、获取元素五、Numpy的算术运算5.1 对应元素相乘5.2 点积运算 六、后记 本文的目标受众&#xff1a; 对机…

改进粒子群算法优化BP神经网络---回归+分类两种案例

今天采用改进的粒子群算法(LPSO)优化算法优化BP神经网络。本文选用的LPSO算法是之前作者写过的一篇文章&#xff1a;基于改进莱维飞行和混沌映射&#xff08;10种混沌映射随意切换&#xff09;的粒子群优化算法&#xff0c;附matlab代码 文章一次性讲解两种案例&#xff0c;回归…

Maven出现报错 ; Unable to import maven project: See logs for details错误的多种解决方法

问题现象; IDEA版本&#xff1a; Maven 版本 &#xff1a; 3.3.9 0.检查 maven 的设置 &#xff1a;F:\softeware\maven\apache-maven-3.9.3\conf 检查setting.xml 配置 本地仓库<localRepository>F:\softeware\maven\local\repository</localRepository>镜像…

xLua学习

xLua教程&#xff1a;https://github.com/Tencent/xLua/blob/master/Assets/XLua/Doc/XLua%E6%95%99%E7%A8%8B.md xLua配置&#xff1a;https://github.com/Tencent/xLua/blob/master/Assets/XLua/Doc/configure.md FAQ&#xff1a;https://github.com/Tencent/xLua/blob/maste…

信号平滑或移动平均滤波研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【数据结构OJ题】消失的数字

原题链接&#xff1a;https://leetcode.cn/problems/missing-number-lcci/ 目录 1. 题目描述 2. 思路分析 3.代码实现 1. 题目描述 2. 思路分析 方法一&#xff1a;排序遍历&#xff08;下一个数不等于上一个数1&#xff0c;这个下一个数就是消失的数字&#xff09;。 时…

K8s中的核心技术Helm

1.helm的引入 &#xff08;1&#xff09;编写yaml文件 &#xff08;2&#xff09;编写deployment文件 &#xff08;3&#xff09;编写service文件 &#xff08;4&#xff09;编写Ingress文件 2.helm的引入解决的问题&#xff1f; &#xff08;1&#xff09;使用helm可以把…

Zookeeper笔记

为什么要使用Zookeeper dubbo需要一个注册中心&#xff0c;而Zookeeper是我们在使用Dubbo是官方推荐的注册中心 Zookeeper介绍 Zookeeper的集群机制 Zookeeper是为了其他分布式程序提供服务的&#xff0c;所以不能随便就挂了。Zookeeper的集群机制采取的是半数存活机制。也…

JVM问题

1. jvm运行时区域划分及每个区域的作用 堆、方法区&#xff08;元空间&#xff09;、虚拟机栈、本地方法栈、程序计数器 2. 堆内存分配策略&#xff1a;新生代&#xff0c;老年代&#xff0c;gc时机 • 对象优先分配在Eden区&#xff0c;如果Eden区没有足够的空间进行分配时&am…

三种方式创建对象的几种方式及new实例化时做了什么?

创建对象的几种方式 利用对象字面量创建对象 const obj {}2.利用 new Object创建对象 const obj new Object()3.使用 构造函数实例化对象 function Fn(name) {this.name name} const obj new Fn(张三) console.log(obj.name); //张三为什么要用构造函数的形式&#xff1…

STM32--综述

文章目录 前言STM32简介STM32F103C8T6系统结构Keil软件安装注意事项新建工程操作流程 前言 本专栏将学习B站江协科技的STM32入门教程&#xff0c;通过自身理解和对老师的总结所写的博客专栏。 STM32简介 STM32是意法半导体&#xff08;STMicroelectronics&#xff09;公司推…

实施高级存储功能

实施高级存储功能 使用Stratis管理分层存储 Stratis 适用于Linux的本地存储管理解决方案。旨在提供更便利的方式执行存储的初始配置&#xff0c;对存储配置进行修改&#xff0c;并使用高级存储功能。 Stratis以管理物理存储设备池的服务形式运行&#xff0c;并透明地为新创…

Popconfirm气泡确认框(antd-design组件库)简单使用

1.Popconfirm气泡确认框 点击元素&#xff0c;弹出气泡式的确认框。 2.何时使用 目标元素的操作需要用户进一步的确认时&#xff0c;在目标元素附近弹出浮层提示&#xff0c;询问用户。 和 confirm 弹出的全屏居中模态对话框相比&#xff0c;交互形式更轻量。 组件代码来自&…

kubernetes 集群搭建(二进制方式)

使用二进制方式搭建Kubernetes集群&#xff0c;可以更加灵活、自由地定制和配置Kubernetes。同时&#xff0c;它还可以实现更高的性能和更小的资源占用。 对于我这个初学者来说&#xff1a; 更加直观地看到Kubernetes的各个组件&#xff0c;了解它们之间的关系和作用。在搭建…

火车头标题伪原创【php源码】

大家好&#xff0c;给大家分享一下python怎么读取文件中的数据&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 火车头采集ai伪原创插件截图&#xff1a; python是一门非常火爆且相对易学的编程语言&#xff0c;应用在各种场景。许多人想学…

GO学习之 网络通信(Net/Http)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、 文章目录 GO系列前言一、H…

微信小程序tab加列表demo

一、效果 代码复制即可使用&#xff0c;记得把图标替换成个人工程项目图片。 微信小程序开发经常会遇到各种各样的页面组合&#xff0c;本demo为list列表与tab组合&#xff0c;代码如下&#xff1a; 二、json代码 {"usingComponents": {},"navigationStyle&q…

在java中操作redis_Data

1.引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency> 2.配置Redis数据源 redis:host: ${sky.redis.host}port: ${sky.redis.port}password: ${sk…

基于Windows手动编译openssl和直接安装openssl

零、环境 win10-64位 VS2019 一、手动编译 前言&#xff1a;对于一般的开发人员而言&#xff0c;在 openssl 上下载已经编译好的 openssl 库&#xff0c;然后直接拿去用即可&#xff0c;&#xff0c;不用手动编译&#xff0c;{见下文直接安装}。。。对于一些开发人员&#…