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

原创

已于 2024-04-18 14:53:19 修改 · 1.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#axure #echarts #前端 #产品经理 #交互 #ui

于 2024-04-18 14:45:47 首次发布

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)