Axure RP9 引入eCharts图表

M_try

已于 2023-10-07 14:46:55 修改

阅读量1.2k

点赞数 3

分类专栏：项目管理文章标签： axure echarts 前端 ui

于 2023-09-28 16:48:32 首次发布

本文链接：https://blog.csdn.net/M_try/article/details/133385601

版权

项目管理专栏收录该内容

2 篇文章 1 订阅

订阅专栏

一、 ECharts

地址：https://echarts.apache.org/zh/index.html
概述：一个基于 JavaScript 的开源可视化图表库
提供了很多图表样式案例
在这里插入图片描述

二、 Axure引入eCharts图表步骤

步骤一：打开Axure，添加矩形元素，调整矩形所需大小，并命名，如：chart1

在这里插入图片描述

步骤二：给矩形新建载入时交互

1、选中，矩形，交互选择“载入时–打开链接–链接到URL或文件路径”，
在这里插入图片描述
2、点击“fx”打开设置弹窗，待定

步骤三：设置eCharts图表代码

1、复制下方代码到记事本，对应红框位置的名称改为矩形名称，“chart1"

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

option = {



};

if (option && typeof option === "object"){
    myChart.setOption(option, true);
}
}, 800);

在这里插入图片描述
2、进入eCharts官网，找到想要的图表，例如这里选择的是玫瑰图，右侧是图表，左侧是代码，写好了右侧图表的展示方式、数据等信息（会JavaScript 的，也可以直接先在这里，修改代码将图表调整为自己所需的样式、数据等）。