Axure原型创建折线、柱状等图形,引用echarts

本文介绍如何在Axure原型设计工具中引入并使用ECharts图表库,通过具体步骤指导读者实现动态图表展示,适用于快速原型设计阶段的数据可视化需求。

1、在echarts网站选择对应的统计图形:

网址:Examples - Apache ECharts

2、对代码进行编辑,使其适配自己的业务。 

3、在Axure中创建一个基本元件矩形。命名为:test

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 = {

//todo  option中代码复制过来

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

6、点击确认,静茹预览页面。

7、完成创建。

### 回答1: Axure是一种使用简单、功能强大的原型设计工具,可以帮助用户快速创建交互原型。在Axure中,可以通过使用线和柱状图的组合来创建折线柱状组合图。 折线柱状组合图常用于数据可视化,可以同时展示柱状图折线图的数据。在Axure创建折线柱状组合图的步骤如下: 1. 首先,打开Axure软件并新建一个项目。 2. 在项目中,选择一个适当的页面或画布来绘制折线柱状组合图。 3. 在工具栏上,找到“组件”选项,并选择“图表”选项卡。 4. 在图表选项卡中,可以看到多种图表样式。选择柱状图样式并将其拖动到画布上。 5. 在画布上调整柱状图的大小和位置,以适应你的设计需求。 6. 接下来,找到线条工具,选取折线样式,并在柱状图上方绘制折线。可以根据需要添加多条折线。 7. 在折线柱状组合图上添加图例、坐标轴、标题等辅助信息,以使图表更加完整和易于理解。 8. 最后,通过Axure提供的交互功能,可以为折线柱状组合图添加鼠标悬停、点击等操作来展示更多的数据细节。 通过以上步骤,就可以使用Axure创建一个折线柱状组合图。这样的图表可以更直观地展示数据之间的关系和趋势,帮助用户更好地理解和分析数据。 ### 回答2: Axure是一款强大的原型设计工具,它可以帮助用户快速设计和创建交互式界面原型。其中,折线柱状组合图是Axure中一种常用的图表类型,可以同时展示线性和柱状图的数据。 折线柱状组合图的特点是通过将折线图和柱状图结合起来,以便更清晰地展示和比较不同数据集的趋势和变化。在Axure中,我们可以使用其内置的图表组件来创建这种图表。 首先,我们需要准备好需要展示的数据。可以是时间序列数据,例如一段时间内的销售额变化;也可以是对比数据,比如不同产品在不同地区的销售情况。 然后,我们可以在Axure的画布上选择合适的大小和位置,绘制折线柱状组合图的外框。接下来,可以在图表上添加坐标轴和刻度,以便更好地展示数据。 然后,我们需要将数据导入到Axure的数据视图中。在数据视图中,可以添加数据列并输入相应的数据。对于折线图,我们可以选择添加线性数据;对于柱状图,我们可以选择添加柱状数据。 接下来,我们可以在图表中使用Axure的交互式组件,如热点或单选框,来实现与图表交互。比如,可以添加热点在鼠标悬停时显示数据具体数值,或者添加单选框来切换不同的数据集。 最后,我们可以对图表进行样式设置,如调整线条粗细和颜色,设定柱状图的宽度和颜色等。这样,我们就完成了一个简单的折线柱状组合图的设计和创建。 总的来说,Axure提供了强大的功能来设计和创建折线柱状组合图。通过合理的数据处理和样式设置,可以更好地展示数据的趋势和变化,从而帮助用户做出更明智的决策。 ### 回答3: Axure是一种流行的原型设计工具,可以用来创建交互式的原型。在Axure中,我们可以使用折线柱状组合图来显示数据集合的变化趋势和比较不同数据集之间的差异。 折线柱状组合图是一种将折线图和柱状图结合在一起的图表类型。它可以同时展示数据的趋势和数量,使数据更加直观和易于理解。 在Axure中,我们可以通过以下步骤创建折线柱状组合图: 1. 首先,我们需要准备好要显示的数据集合。可以是某个时间段内的销售数据、用户注册数量等。 2. 在Axure中,创建一个新的页面,并添加一个图表部件。 3. 根据数据集合的数量,选择合适的图表类型。对于折线柱状组合图,我们可以选择折线图和柱状图两种类型。 4. 将数据集合导入到图表中。可以通过手动输入数据或导入Excel等文件来实现。 5. 根据需要,调整图表的样式和布局。可以设置折线的颜色和线条类型,柱状图的填充色和宽度等。 6. 添加数据标签和图例,以便更清晰地显示数据的含义和来源。 7. 最后,预览和调整图表的大小和位置,确保它在页面上具有合适的展示效果。 通过以上步骤,我们可以在Axure创建出具有折线柱状组合效果的图表。这种图表类型能够直观地展示数据的变化趋势和数量比较,帮助用户更好地理解和分析数据集合。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值