Axure自定义Echarts交互图

article/2025/10/19 8:14:50

文章目录

    • 一、固定JS代码
    • 二、可变代码示例

要想在Axure中载入echarts动态图表,需要利用原件交互动作。具体步骤如下:

step1:选择原件

step2:添加载入交互

step3:添加打开链接动作

step4:选择链接外部URL,并写入JS代码

step5:保存并预览

一、固定JS代码

下列代码是固定代码,需要将原件名称修改给step1中的实际原件名称,需要将可变代码处全部#和文字替换为具体的JS代码。

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=原件名称]').get(0);var myChart = echarts.init(dom);
#######################################    #可变代码
#######################################
if (option && typeof option === "object"){myChart.setOption(option, true);    }}, 800);

二、可变代码示例

Apache ECharts是一个基于JS的开源可视化图标库,在其官网示例中几乎涵盖所有二维图表、三维图表的交互图形示例JS代码,可以直接拷贝后针对性进行修改即可。如饼图

image-20221026103735607

左侧代码如下:

option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]
};

http://chatgpt.dhexx.cn/article/LIjuxesI.shtml

相关文章

【UML】交互图(顺序图、合作图\协作图)

一、交互图 1.交互图用来描述系统中的对象是如何进行相互作用的。即一组对象是如何进行消息传递的。 2.交互主要用于描述协作的动态行为方面 3.当对交互建模时,通常既包括对象(每个对象都扮演某一特定的角色),又包含消息&#…

UML——交互图

交互图用来描述系统中的对象是如何进行相互作用的,即一组对象是如何进行消息传递的。 交互主要用于描述协作的动态行为方面。 对交互进行建模时,通常包括对象(每个对象都扮演某一特定的角色),消息(每一个消…

uml模型的交互图,UML之交互图

交互图是uml中描述系统中的对象如何进行交互动作的 。来张UML之交互图: uml模型的交互图概念 交互图,主要描述的是系统中的一组对象的消息的传递的,为对象间的交互定义了一个可视的表示方法。 uml模型的交互图构成 交互图并不是一个图,而是一些图的统称,就像我们在类图里说…

【网络图】R语言画图,超炫酷动态交互式图结构

网络图简介 网络图表示着一群事物之间的关系,如果两个事物有关系,则对应结点之间有边。 实战 官方实例 所需的包 library(tidyverse) library(viridis) library(patchwork) library(hrbrthemes) # install.packages("ggraph") library(gg…

umlの交互图

前面介绍了uml的很多种图,下面挑出几个联系比较紧密的进行对比和联系。用例图和交互图都是表示动态行为,只是前者表示系统外部对象(参与者)与系统这两个大对象之间的互动,而后者则侧重在表示系统内部一群小对象之间的互…

UML交互图(时序图、顺序图、序列图是一样的、协作图)

时序图、顺序图、序列图是一样的,可能是因为英文翻译的问题,他们对应的都是Sequence Diagram,而另一个Timing Diagram可能翻译常时间图更合适一点点。 Sequence Diagram描述了多个对象如何协作完成一个用例的过程;而Timing Sequen…

【UML】交互图(时序图、协作图)

时序图 内容 描述了对象之间传递消息的时间顺序用来表示用例的行为顺序是强调消息时间顺序的交互图描述类系统中类和类之间的交互,将这些交互建模成消息交换 元素 1.对象 对象代表时序图中的对象在交互过程中所扮演的角色 2.生命线 生命线是一条虚线&#…

交互概览图

一:定义 1,交互概览图是交互图与活动图的混合物,可以把交互概览图理解为细化的活动图,在其中的活动都通过一些小型的顺序图来表示;也可以将其理解为利用标明控制流的活动图分解过的顺序图。 2,交互概览图…

UML交互图

顺序图和协作图统称交互图,用来描述系统中多个对象之间的相互关系及对象间消息的传递,用于对系统中多个对象的相互作用的过程进行建模。 在面向对象分析过程中,可以使用顺序图来描述完成一个用例的过程,使用协作图来分析系统中的对…

UML之行为图(活动图、状态图、交互图)

UML的行为图是用来描述系统的动态模型和对象之间的交互关系,包括三种:活动图、状态图、交互图。 下面对这三种图进行介绍: 一、活动图: 1、定义:用来描述满足用例要求所要进行的活动以及活动间的约束关系,…

UML——交互图(顺序图与协作图)

目录 交互图 顺序图 协作图 顺序图与协作图之间的关系 交互图 用来描述系统中的对象是如何进行相互作用的。即一组对象是如何进行消息传递的。 交互图主要用来描述协作的动态行为方面 交互图有顺序图和协作图两种形式 ——顺序图:强调消息的时间顺序 ——协作…

UML交互图(顺序图和交互图)

一、概念 交互图描述对象之间的动态合作关系以及合作过程中的行为次序。交互图常常用来描述一个用例的行为,显示该用例中所涉及的对象以及这些对象之间的消息传递情况,即一个用例的实现过程。 交互图有顺序图和协作图两种形式。 时序图中描述对象按…

软件工程 第五章:交互图

第五章:交互图 概述 动态模型用来描述系统的动态行为,分为状态模型和交互模型。交互图描述对象间的动态合作关系及合作过程中的行为次序。常用来描述一个用例的行为,显示该用例中所涉及的对象及它们间的消息传递情况。交互图有序列图和协作…

UML系列文章(19)基本行为---交互图

顺序图和通信图(均是交互图)是UML中用于对系统的动态方面进行建模的5种图中的两种。交互图表现的是一个交互,由一组对象和它们之间的关系组成,包括它们之间可能传递的消息。顺序图是强调消息时间顺序的交互图,通信图是…

UML-----交互图(顺序图和合作图)

交互图 交互图是用来描述系统中的对象是如何进行相互作用的。也就是一组对象是如何进行信息传递的。主要描述协作的动态行为方面。 交互包括两个方面:1.强调消息的时间顺序。2.强调发送和接收信息的对象的结构组织 因此引出了两个图 顺序图&#…

UML九种图之交互图

序列图又叫顺序图,是交互图的一种,交互图包括顺序图和合作图。那么什么是交互图呢? 交互图 u 定义 交互图是用来描述系统中的对象是如何进行相互作用的。即一组对象是如何进行消息传递的。 交互主要用于描述协作的动态行为方面。 当对交互…

UML---交互图(顺序图和协作图)

交互图 交互图用来描述对象之间的交互关系,包括顺序图和协作图 交互图用来描述系统中的对象是如何进行相互作用的。即一组对象是如何进行消息传递的。 顺序图 1.概念:描述对象之间的交互顺序,着重体现对象间消息传递的时间顺序&#xff0…

【UML】——交互图

一、交互图 1、什么是交互图 交互图用来描述系统中的对象是如何进行相互作用的,即一组对象是如何进行消息传递的 交互图主要用于描述协作的动态行为方面 2、两种方式描述 强调消息的时间顺序 强调发送和接受消息的对象的结构组织 3、交互图包括 时序图&…

【环境搭建】gflags和glog的安装

【环境搭建】gflags和glog的安装 在Ubuntu16.04上安装gflags什么是gflags安装gflags 在Ubuntu16.04上安装glog什么是glog安装glog使用glog 结语 在Ubuntu16.04上安装gflags 什么是gflags gflags用于处理命令行参数 安装gflags 用apt下载git和cmake sudo apt-get install g…

Windbg的gflags.exe -- Attach调试利器

有没有碰到过程序启动就因为异常直接crash?有没有碰到程序启动之后什么反应也没有?有没有碰到过程序启动之后去触发另一个进程失败?有没有碰到别人的程序调用了你的代码,出现问题以后,让你来调查,而你只有你…