Axure引用ECharts图表 解决火狐浏览器出错

Axure原型添加Echarts图表,没耐心看文章的可以直接下载示例 Axure中使用ECharts图表示例

1. 打开Axure新建页面

2. 页面添加元件

元件类型随意,矩形、动态面板、热区、图片 甚至段落都可以

3. 命名元件

随意命名,单个页面用到多个图表时名称要区别定义

在这里插入图片描述

4. 新增交互

选择 “载入” 时,执行动作选择 “打开链接”,链接到选择 “连接到外部URL”,在链接输入框的后边,点击 fx 打开窗口,输入JS函数脚本

在这里插入图片描述

5. JS内容

javascript:$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
setTimeout(function(){
var dom =$('[data-label=[[This.name]]]').get(0);
var Chart = echarts.init(dom);
var option = { };
if (option && typeof option === "object"){Chart.setOption(option, true);}}, 500);

以下代码块中为基础的js内容,其中 option={}; 为图表的各个参数项;
打开ECharts官方示例,https://echarts.apache.org/zh/index.html 选择需要的图表,进行在线编辑,完成后将在线编辑的内容全部复制出,替换基础js代码中的 option 部分;
在这里插入图片描述
以下为替换完成后所有的js代码

javascript:$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
setTimeout(function(){
var dom =$('[data-label=[[This.name]]]').get(0);
var Chart = echarts.init(dom);
var 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' }]}]
};
if (option && typeof option === "object"){Chart.setOption(option, true);}}, 500);

内容过长,可以先在NotePad++等文本编辑器中编辑, 编辑完后再复制到Axure中
编辑完成保存后,发布预览
运行成功效果图
在这里插入图片描述

示例中通过 [[This.name]] 绑定了当前元件

以上的方式支持大部分浏览器预览,但是火狐浏览器打不开,只显示一个错误代码、、、、
在这里插入图片描述
错误原因大概因为 火狐下第一次加载Echarts的js未成功,然后在Axure中的setTimout的js函数,无法被有效执行

火狐浏览器下设计方式

火狐浏览器下按照以下方式设计
新建页面、添加元件、命名 这些都与上边描述一致
在添加交互时,同样选择在加载时打开外部URL链接,链接的内容修改为

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);
var dom =$('[data-label=[[This.name]]]').get(0);
var myChart = echarts.init(dom);

编辑完成链接后,继续点击“添加动作”,使用Axure模拟添加定时函数;
继续点击“添加动作”,选择“触发事件” > “尺寸改变”;
新增交互 “尺寸改变” 时 “打开链接”,链接为以下内容

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);
var dom =$('[data-label=[[This.name]]]').get(0);
var myChart = echarts.init(dom);
var 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' }]}]
};
if (option && typeof option === 'object'){myChart.setOption(option, true);    
}

具体步骤如下图所示
在这里插入图片描述编辑完成后,发布预览
火狐浏览器展示效果图
在这里插入图片描述

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

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

相关文章

机器学习-11-基于多模态特征融合的图像文本检索

总结 本系列是机器学习课程的系列课程,主要介绍机器学习中图像文本检索技术。此技术把自然语言处理和图像处理进行了融合。 参考 2024年(第12届)“泰迪杯”数据挖掘挑战赛 图像特征提取(VGG和Resnet特征提取卷积过程详解&…

Facebook账号运营要用什么IP?

众所周知,Facebook封号大多数情况都是因为IP的原因。Facebook对于用户账号有严格的IP要求和限制,以维护平台的稳定性和安全性。在这种背景下,海外IP代理成为了一种有效的解决方案,帮助用户避免检测,更加快捷安全地进行…

学习笔记:Vue2中级篇

Vue2 学习笔记:Vue2基础篇_ljtxy.love的博客-CSDN博客学习笔记:Vue2中级篇_ljtxy.love的博客-CSDN博客学习笔记:Vue2高级篇_ljtxy.love的博客-CSDN博客 Vue3 学习笔记:Vue3_ljtxy.love的博客)-CSDN博客 文章目录 5.…

SpringCloud系列(5)--SpringCloud微服务工程公共部分提取

前言:在上一章节中我们创建了两个个SpringCloud工程,但在两个工程中分别存在着一些重复的部分,例如重复的实体类(如图所示),这样会造成系统的冗余,所以我们需要把公共的类提取到一个工程里&…

JavaScript变量及数据类型

目录 概述: 变量: 前言: 变量的命名: 定义变量: 为变量赋值: 变量提升: let和const关键字: JS数据类型: 前言: typeof操作符: JS基本…

RK3588 Android13 鼠标风格自定义动态切换

前言 电视产品,客户提供了三套鼠标图标过来,要求替换系统中原有丑陋风格且要支持动态切换, 并且在 TvSetting 中要有菜单,客户说啥就是啥呗,开整。 效果图 test framework 部分修改文件清单 png 为鼠标风格资源图片,这里就不提供了,可自由找一个替换一下就行 framew…

渐进时间复杂度O(n)

基本操作数 算法的运行速度受计算机性能的影响,所以通常考虑算法效率的不是算法运行的实际用时,而是算法运行所需要进行的基本操作的数量。 像加减乘除、访问变量、给变量赋值等都可以看作基本操作。对基本操作的计数或是估测可以作为评判算法用时的指标…

Python turtle海龟绘制美国队长盾牌

使用Python中的turtle模块绘制美队盾牌 具体思路如下: 导入海龟库第1个圆:半径 200,红色填充第2个圆:半径 150,白色填充第3个圆:半径 100,红色填充第4个圆:半径 50,蓝色…

CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)

前言:在我们学习CSS的时候,主要学习选择器和常用的属性,而这篇文章讲解的就是最基础的属性之一——文字属性。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 废话不多说,让我们直…

【C++】C++11 包装器

👀樊梓慕:个人主页 🎥个人专栏:《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 🌝每一个不曾起舞的日子,都是对生命的辜负 目录 前言 function包装器 fu…

RHCE:网络服务综合项目

基础配置: 1.配置主机名,静态IP地址 2.开启防火墙并配置 3.部分开启SElinux并配置 4.服务器之间使用同ntp.aliyun.com进行时间同步 5.服务器之间实现SSH免密登录 业务需求: 1.Server-NFS-DNS主机配置NFS服务器,将博客网…

【Lattice FPGA 开发】Modelsim与Diamond联合仿真

本文讲解Modelsim与Diamond进行联合仿真步骤,以及对遇到问题的解决与说明。 文章目录 软件版本0. Diamond设置文件为仿真文件特别注意 1. Diamond设置仿真软件为Modelsim2. Modelsim编译Lattice的库文件2.1 新建文件夹存放库文件2.2 Modelsim中建立新的仿真库2.2.1…

千锤百炼之算法Scanner和System.out引起超时解决办法

题外话 觉得这个内容还是很关键的,过来写一下吧 本次内容有点抽象大家试着听一下 正题 做过算法题的人都知道,无论是在力扣还是牛客或者别的网站刷题,很多情况下都会遇到输入输出的情况,当我们用Scanner和System.out.print()就有可能产生超时问题 如下图 接下来会有一段代…

远程计算机或设备将不接受连接_解决方法

重启了下电脑遇到了无法联网的问题,解决方法如下: 打开“控制面板”; 打开Internet选项; 点击“连接”; 点击“局域网设置”; 设置选项为下图: 连接成功了: 原因: 打…

数字化到底具有何种魔力!成为跟上时代的必经之路?

数字化确实具有深远的魔力和吸引力,成为现代企业在跟上时代步伐、实现持续发展和创新的重要驱动力。相较于传统信息化,数字化转型能够为企业带来更为显著和全面的降本增效效应。 首先,数字化转型通过深度融合信息技术和管理标准化&#xff0c…

GPU版本torch使用教程

GPU版本torch使用教程 一、下载配置CUDA和CUDNN (1)进入cmd使用nvidia-smi.exe查看自己电脑支持的最新CUDA版本(可以下载地低版本),如图: 也可以通过NVIDIA控制面板(NVIDIA Control Panel&am…

HTML重要标签梳理学习

1、HTML文件的框架 使用VS Code编码时&#xff0c;输入!选中第一个&#xff01;就可以快速生成一个HTML文件框架。 2、标签 <hr> <!--下划线--> <br> <!--换行--> <strong>加粗</strong> &…

C++11——线程库的理解与使用

目录 前言 一、线程库的构造 1.默认构造 2.带参构造 3.拷贝构造与赋值拷贝&#xff08;不支持&#xff09; 4.移动构造 二、线程调用lambda函数 三、线程安全与锁 1.lambda中的线程与锁 2.函数指针中的线程与锁 3.trylock() 4.recursive_mutex 5.lock_gurad守卫锁…

JAVA-服务器搭建-创建web后端项目

首先打开IDEA 点击新建项目 写好名称-模板选择 Web应用程序 -语言选择 Java 构建系统选择 Maven 然后点击下一步 选择版本-选择依赖项 Web Profile 点击创建 点击当前文件-选择编辑配置 选择左上角的加号-选择Tomcat服务器-选择本地 点击配置-选择到Tomcat目录-点击确定 起个…

利用STM32 HAL库实现USART串口通信,并通过printf重定向输出“Hello World“

一、开发环境 硬件&#xff1a;正点原子探索者 V3 STM32F407 开发板 单片机&#xff1a;STM32F407ZGT6 Keil版本&#xff1a;5.32 STM32CubeMX版本&#xff1a;6.9.2 STM32Cube MCU Packges版本&#xff1a;STM32F4 V1.27.1 上一篇使用STM32F407的HAL库只需1行代码实现US…