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

网络 02-07 3045

相关链接

目录Axure中文学习网AxureShopAxureShop-QA

??最开始只是想尝试一下，在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); option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] }; if (option && typeof option === "object"){ myChart.setOption(option, true); }}, 800);

? 预览：这里也可以看出echarts图案是透明的，会显示出下层底色。 ?

还可以加上Axure的变量功能，自动获取当前元件名称[[This.name]]

? 预览：和不使用变量的效果一致。 ?

3.1 title

鼠标移入时，背景色会变为浅灰色，且上方有一个线条的交互效果。背景变色比较容易实现，

这里难点主要在于线条的交互效果，实现方法不唯一，仅供参考：用白块覆盖住底色黑块部分，交互时移开。

以左块为例讲解：初始坐标(0,0) 宽度30

鼠标移入时，左块移动到(-30,0)，让底层黑色部分彻底暴露出来，线性200ms效果与官网基本一致。鼠标移出时，左块移动到(0,0)，覆盖底层黑色部分，从而达到与官网一致的交互效果。

需要注意，覆盖白块所在动态面板的宽度是60，左块、右块的宽度均为30。原理是动态面板内元件超出动态面板范围后，就看不到了。

案例中：左块移动到 (-30,0) 并没有消失或隐藏，但在面板外效果为不可见。

3.2 左侧导航

要点：鼠标移入、鼠标移出、设置选项组、选中效果、滚动到元件

鼠标移入、鼠标移出：使用动态面板的2个子页面实现即可。注意除了右侧蓝色线条和灰色背景外，字体颜色也有细微变化。

设置选项组：将所有左侧导航，放入同一个选项组内。

选项组的特点是：同一选项组内至多有一个对象处于选中状态 -> 参考案例9 【按钮】单选按钮组。

选中：

iconfont图片，未选中时：蓝色图标（色号#6578AA），选中时：白色图标（色号#FFFFFF）。 ? ? 文字描述，字色：白色（色号#FFFFFF）。 ? ? 背景色，填充颜色：蓝色（色号5470C6）。 ? ? 选中状态则是通过浏览窗口的当前坐标 This.scrollY 来判断的。 ? ? 而不是点击时就触发选中效果： ? ? 使用This.scrollY 在页面滚动的过程中，各个导航依次变为选中状态，明显可以看出来渐变的效果： ? ? 而且，在滚动浏览页面时，也需要用此方式来反向联动左侧导航栏的选中状态。

滚动到元件：在主内容中，放置了很多热区，用于点击左侧导航时，页面滚动到对应位置。

? 在单击时，设置滚动到元件即可实现浏览内容跳转的效果。 ?

3.3 深色模式-开关

参考案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级

3.4 右侧滚动条

参考案例16 【动态面板-滚动条6】手动制作滚动条。这部分可以跳过，最开始手动制作了一个滚动条，但发现想要实现鼠标滚轮浏览页面效果，是不能用自制滚动条的。就把进度条颜色改为透明，隐藏起来了。

在主内容动态面板开启自带的垂直滚动功能。

3.5 主内容

主内容分为两个动态面板：【主内容面板】浅色、【主内容面板】深色。两者尺寸相同，默认浅色面板图层置于上方。

两套面板内部分组、图层顺序全部一致，仅内容样式有所区别。

3.5.1 【滚动】定位

通过 2个移动的热区，同步浏览进度：

通过【滚动】深色-实时同步，滚动浅色模式窗口时，同步深色模式的浏览进度。 ? ? 滚动到元件 ? ? 通过【滚动】浅色-实时同步，滚动深色模式窗口时，同步浅色模式的浏览进度。 ? ? 滚动到元件 ?

通过 10个固定的热区，联动左侧导航栏：

浅色： ??【滚动】浅色-顶部 ??【滚动】浅色-折线图 ??【滚动】浅色-柱状图 ??【滚动】浅色-饼图 ??【滚动】浅色-散点图 ? ? 深色： ??【滚动】深色-顶部 ??【滚动】深色-折线图 ??【滚动】深色-柱状图 ??【滚动】深色-饼图 ??【滚动】深色-散点图 ?

3.5.2 【主内容】X色模式-覆盖

这里是从官网截图时，深色模式开关。

用一个图片将这个深色模式开关覆盖。

3.5.3 【主内容】X色模式-热区

以折线图 - 基础折线图为例，主要做了四件事

单击时-传递参数、单击时-打开链接、鼠标移入-放大图片、鼠标移出-缩小图片

单击时-传递参数：

点击每个热区，设置不同的input_text变量值（js代码） ? ? 上图热区对应js代码来自：echarts官网-基础折线图 ?

单击时-打开链接：

单击时，除了打开链接，还设置了input_text变量值，这个变量会传递到新的页面中，一会要继续使用的。 ? 涉及两个概念：全局变量（所有页面共用）、局部变量（仅当前页面有效） ?

鼠标移入-放大图片

注意下图黄框部分，锚点选择中央位置，放大时会按照指定锚点去放大

鼠标移出-缩小图片

锚点同样选择中间，这里尺寸一定是恢复至原图大小

3.5.4 【主内容】X色模式-预览面板

同样以折线图 - 基础折线图为例，只做了一件事：

动态面板特性：鼠标移入热区，图片放大后，由于动态面板的特性，超出动态面板范围的内容不显示。 ? 鼠标移入前： ? ? 鼠标移入后： ? ? 看似图片尺寸没有变，只是内容放大了。 ? 其实是整个图片放大了，但由于动态面板的限制，超出范围没有显示 ?

3.5.5 【主内容】X色模式-背景

来自 echarts官网-示例的页面截图，都是一些图片，由于切图导致右侧较窄，手动加宽一列，预留给滚动条。

四、示例详情页面 - 制作方法

这里有很多功能是没有做实现的，例如深色模式、无障碍花纹，都只是截图。

此页面主要目的在于，将echarts图案引入至Axure RP9中显示 -> 也就是【显示区】

4.1 title

同3.1 整个组合是直接复制粘贴过来的，没有任何改动。

4.2 运行时间

分为上层显示文字、和下层覆盖

覆盖:

将覆盖组合隐藏后，可以看到下层是截图中自带的文字。 ? 这里通过同样底色图片覆盖住原文字后，在上层自己拼接生成文字。 ?

显示文字：

[[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getSeconds()]]　图表已生成, [[Math.floor(Math.random()*20 + 10)]].[[Math.floor(Math.random()*10)]][[Math.floor(Math.random()*10)]]ms ? 其中： ?Now.getHours()：获取当前时间的小时。但如果是早上9点8分7秒，则返回9，而不是09。 ?Now.getMinutes()：获取当前时间的分钟。但如果是早上9点8分7秒，则返回8，而不是08。 ?Now.getSeconds()：获取当前时间的秒。但如果是早上9点8分7秒，则返回7，而不是07。 ?Math.random()：获取0~1的随机数字，Math.random() * 20 + 10则会获取10~30之间的随机数字。 ?Math.floor()：对数字向下取整，例如Math.floor(14.2351235) = 14。 ?

4.3 代码区

代码区分为行号、输入框

输入框使用元件为：文本域

4.3.1 行号

文本域不自带左侧显示行号，这里是用矩形元件伪造了一个行号显示效果，主要通过调整行间距来和右侧输入框内容大致对齐

4.3.2 输入框

分为两种情况：文本改变时、载入时

文本改变时：

全局变量 input_text： [[This.text]] 表示获取当前文本域中的内容。从而达到实时改变右侧图案的效果。全局变量 echarts_url：

需要注意： 1.data-label后面的参数一定和显示echarts元件的名称一致，不建议用中文，避免出现奇怪的bug。 2.input_text是从另一个页面跳转过来时，就赋值好的变量，这里是将其引用，并拼接起来了。 ? ? 并且触发事件： echarts_picture 移动时，这里并没有真的移动，只是通过触发这个事件来执行后面的代码逻辑。这里触发载入时动作应该也是可以的。

载入时：逻辑和文本改变时基本一致，但多了一个赋默认值操作

a.直接访问此页面：input_text = “” -> input_text为空值 ?此时由于input_text是没有任何值的，会导致整个页面都是空白的，效果不是很好，所以要额外给其赋予一个默认值 ?

?input_text：

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };

b.从导航跳转：input_text不为空值

4.4 显示区

只需要打开链接即可，echarts_url 是通过上一步骤拼接好的参数传递过来的

22/09/14