1.4_18 Axure RP 9 for mac 高保真原型图 - 案例17 【js-echarts官网】

本文档详细介绍了如何使用AxureRP9制作Echarts官网的高仿原型，包括标题交互、导航栏联动、深色模式、内容滚动及Echarts图案展示等复杂功能。案例涵盖动态面板滚动、选项组、热区交互等多个知识点，适合有一定基础的Axure学习者进阶练习。

相关链接

最开始只是想尝试一下，在Axure RP9中引用echarts图片。访问了一下echarts官网，后来对官网的 左侧导航栏、上方标题、深色模式开关、窗口滚动 等功能比较好奇，想试试Axure RP9实现原型图效果能到达哪个底部。就干脆模仿ecahrts部分官网做一小部分山寨。这个案例中内容比较多，尤其是滚动、深色模式的实现方式上我也踩了很多坑，反复修改，建议先完成以下案例后再来尝试：
案例11 【动态面板-滚动条1】
案例12 【动态面板-滚动条2】单向同步滚动
 案例13 【动态面板-滚动条3】双向同步滚动
 案例14 【动态面板-滚动条4】深色模式 - 图层处理
 案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级
↑ 制作的深色模式按钮可以直接拿来这里使用，原理都是一样的 ↑
案例16 【动态面板-滚动条6】手动制作滚动条

案例目标

1. 模仿 echarts官网，制作高仿页面

一、成品效果

Axure Cloud 案例17 【js-echarts官网】

版本介绍

一、示例页面
1.1 上方title 的所有标题支持 鼠标移入、鼠标移出 交互样式。
1.2 上方title 的【Echarts】、【示例】、【EN】支持 鼠标点击 交互样式，并打开链接。
1.3 上方title 点击【Echarts】打开 echarts官网主页。
1.4 上方title 点击【示例】打开 Axure Cloud 案例17 【js-echarts官网】- 1.示例页面。
1.5 上方title 点击【EN】打开 echarts官网 - 示例英文页面。
1.6 左侧导航栏 支持 鼠标移入、鼠标移出 、鼠标点击 交互样式。（用到了 选项组 功能）
1.7 左侧导航栏 与右侧主内容窗口 浏览进度绑定。（动态面板滚动时，根据This.scrollY值，指定左侧导航栏的选中状态）
1.8 左侧导航栏 点击图形名称，右侧主内容窗口 跳转到对应位置。（用到了 滚动到元件 动作，并配合使用热区）
1.9 深色模式开关 支持 鼠标点击 交互样式。（案例15）
1.10 深色模式开关 切换模式后，切换当前模式，并且页面浏览进度不变。（案例15）
1.11 主内容 图形支持 鼠标移入、鼠标移出 、鼠标悬停、鼠标点击 交互样式。
1.12 主内容 触发 鼠标移入、鼠标悬停 时，预览图案 渐变放大。（用到了 设置尺寸 动作的 尺寸+锚点）
1.13 主内容 触发 鼠标移出 时，预览图案 渐变恢复。（用到了 设置尺寸 动作的 尺寸+锚点）
1.14 主内容 触发 鼠标点击 时，跳转到 示例详情页面，并呈现对应代码及图形。（用到了 全局变量 功能）

二、示例详情页面
2.1 上方title 功能不变，参考示例页面。
2.2 左侧文本框 显示js引用内容，支持实时修改后右侧图案也对应变化。（文本改变时，使用拼接思想设置变量值）
2.3 运行按钮 点击后，再触发一次右侧图案刷新。
2.4 每次刷新图案后，右下角 显示文案： HH:mm:ss 图表已生成, ss.SSms。（Axure内置函数获取时间）

二、素材准备

需要准备的素材有 运行按钮（截图）、左侧导航（iconfont，色号#6578AA、#FFFFFF）、预览图片（截图 + 切割图片，深色模式浅色模式各一套）。

三、示例页面 - 制作方法

此案例涉及到的元件极多，建议规范命名，制作方法也仅以介绍实现思路为主。

1.示例 - 预览

2.示例详情 - 嵌入echarts

如果只是测试Axure RP9中，显示echarts图案的话，直接引用以下代码也可以：（data-label参数与元件名称保持一致）

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=echarts_picture]').get(0);
   var myChart = echarts.init(dom);