当前位置: 首页 > news >正文

【Axure结合Echarts绘制图表】

1.绘制一个矩形,用于之后存放图表,将其命名为test在这里插入图片描述

2.新建交互 -> 载入时 -> 打开链接:
在这里插入图片描述
在这里插入图片描述
3.链接到URL或文件路径:
在这里插入图片描述
4.点击fx:
在这里插入图片描述
5.输入:

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);

注意输入内容不能包含中文;矩形名称为test,如果是其他名字要将data-label=test改成其他名字。
代码解释:

javascript:
//引入ECharts库
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);//获取插入的矩形框对象,test是上面取得名字,如果是其它名字,则进行替换//这里用了定时器来延迟图表载入时间,测试时发现刚引入ECharts库就执行图形代码可能会出错。setTimeout(function(){//获取插入的test矩形框,作为图表绘制的容器,如果前面矩形框为其它名字,则test改为对应的名字var dom =$('[data-label=test]').get(0);//初始化var myChart = echarts.init(dom);var option = {/*在此处粘贴ECharts官网的示例代码*/};//设置数据if (option && typeof option === "object"){myChart.setOption(option, true);    }}, 800);

6.在echarts官网找到需要的图表代码,将下面option的这段代码替换上述代码的 var option = {};
在这里插入图片描述
7.保存原型并预览即可:
在这里插入图片描述

http://www.xdnf.cn/news/663355.html

相关文章:

  • 华为OD机试_2025 B卷_返回矩阵中非1的元素个数(Python,100分)(附详细解题思路)
  • Python应用“面向对象”小练习
  • 【深度学习】4. 参数初始化详解与数学推导: Xavier, He
  • 敦普水性双组份聚氨酯面漆检验报告(SGS、重金属含量、低voc)
  • 电路中常见器件及作用(电阻 电容 电感)
  • 如何通过PHPMyadmin对MYSQL数据库进行管理?
  • IP离线库与网站集成
  • 如何在 Windows 10 PC 上获取 iPhone短信
  • MS1205N激光测距用高精度时间测量(TDC)电路
  • 火山引擎云服务器带宽支持
  • 楼宇自控成智能建筑核心技术,提升节能效率,构筑绿色发展新优势
  • 多查询检索在RAG中的应用及为什么平均嵌入向量效果好
  • C/C++内存泄漏深度解析与系统化解决方案
  • 工业级应用:Halcon灰度直方图核心技术全解
  • 数据的获取与读取篇---常见的数据格式CSV
  • uv使用教程
  • Agilent安捷伦Cary3500 UV vis光谱仪Cary60分光光度计Cary1003004000500060007000 UV visible
  • 【STM32开发板】电源设计原理
  • Typescript学习教程,从入门到精通,TypeScript 名称空间与模块语法知识点及案例(14)
  • 前缀和实现题目:区域和检索 - 数组不可变
  • 第2章(新)Day2 - Python基础入门
  • 【图论 并集查找】P3671 [USACO17OPEN] Where‘s Bessie? S|普及+
  • python打卡训练营打卡记录day37
  • 自驾总结Module(综述)
  • CN 第二章 应用层-判断题
  • uniapp-商城-70-shop(3-商品列表,点击规格,进行属性选择)
  • AI巡检系统适合多大面积的餐厅?
  • lc hot 100之:找到所有数组中消失的数字
  • SQL:合并查询(UNION)
  • DL00347-基于人工智能YOLOv11的安检X光危险品刀具检测含数据集