当前位置: 首页 > 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.保存原型并预览即可:
在这里插入图片描述

相关文章:

  • “安康杯”安全生产知识竞赛活动流程方案
  • ATPrompt方法:属性嵌入的文本提示学习
  • 本周 edu教育邮箱注册可行方案
  • 车载通信网络 --- 传统车载网络及其发展
  • 【C++高级主题】异常处理(四):auto_ptr类
  • C++异步日志系统
  • 力扣 155.最小栈
  • sqli-labs第二十七关——Trick with selectunion
  • Queue 与 Deque 有什么区别?
  • 人工智能第一币AISPF,首发BitMart交易所
  • C++笔记-哈希表
  • etcd之etcd curl命令(七)
  • 《反事实棱镜:折射因果表征学习的深层逻辑》
  • AI时代新词-私有数据与AI结合的技术:隐私保护与数据利用的平衡
  • 多头注意力 vs 单头注意力:计算量与参数量区别
  • 游戏行业DDoS防护:基于IP信誉库的实时拦截方案
  • 【数据集】基于ubESTARFM法的100m 地温LST数据集(澳大利亚)
  • 批量转存夸克网盘内容并分享实操教程
  • 002大模型-提示词工程,少样本提示,角色扮演,思维链
  • Axure元件动作七:移动、旋转、启用/禁用效果、置于顶层/底层详解
  • 网站收录少的原因/建网站找谁
  • 做视频赚钱的网站/2021搜索引擎排名
  • 黑色网站源码/网站编辑
  • 权威的合肥网站建设/自动点击器软件
  • wordpress建壁纸站/广告联盟app下载官网
  • 专门做特价的网站/搜索引擎优化面对哪些困境