axure商城

Axure中使用JS代码调用ECharts、AntV图表

1.背景

笔者是一名从业8年的B端产品经理,先后在政府行业、能源行业、交通行业任职,以上几个行业在15年以后,受互联网产品的影响,都逐渐开始流行起设计数据看板、驾驶舱等概念。数据看板在B端产品设计中的意义从一开始的门面担当,逐渐转变成为了业务运行状态的晴雨表,在B端产品设计的地位也越来越重要。笔者在实际工作中,设计数据看板的任务越来越多,要求越来越高,这些设计需求来源于市场、甲方、老板,要求产品人员在短时间内,产出高质量、动态的设计原型。论及这些需求产生的原因,最根本的还是互联网行业对传统行业的渗透,普遍提高了用户的体验阈值。再加上传统行业的大部分从业者也逐渐年轻化,很多关键决策岗位都是由懂业务、懂产品的年轻人担任,这样的现实对我们B端的产品经理提出了新的挑战。

2.探索

针对上述需求,笔者开始寻找解决方案,从传统的解决方案来看,要设计数据看板的原型,常见的方法有:截图法、html文件法、Axhub Charts法、JS调用法。

首先带大家认识一些常见的图表类型,设计图表的目标是帮助用户做出判断和决策,所以从图表的功能上可对图表进行分类,包含比较类、分布类、流程类、地图类、占比类、区间类、关联类、时间类、趋势类。

蚂蚁集团出品的antV对此有详细的解说,各位看官请移步:antV https://antv-2018.alipay.com/zh-cn/vis/chart/index.html

3.解决方案

3.1 截图法

截图法指从一些提供数据图表生成的网站,将示例图表调整成自己想要的图表,截图在axure中拼接成数据看板。

优点:简单、易学、快速、便捷

缺点:图表展示效果不好,无法动态化

以下是笔者收集到的一些常见图表生成网站:

  • Excel(微软)

顾明思义,通过excel生成图表,再将Excel贴图进axure中。

扩展阅读

echarts antv 区别比较?

3.2 html文件法

html仅限于图表网站提供html下载的场景下使用。

主要步骤是:①打开图表网站->②调整配置参数->③生成html并下载->④上传至云服务器->⑤在axure中新建框架原件->⑥框架目标填写html在云服务器上的地址。

优点:简单、易学、图表展示效果好(动态效果)

缺点:发布麻烦、更新麻烦、需要云服务器

①打开图表网站

Echarts:

https://echarts.apache.org/next/examples/zh/editor.html?c=line-simple

antV:

https://g2.antv.vision/zh/examples/gallery

②调整配置参数

Echarts:

antV:

③生成html并下载

Echarts:

antV:

根据提示修改好代码,保存成html文件。

④上传至云服务器

此过程根据自己的实际情况操作。

⑤在axure中新建框架原件

⑥文件地址配置

如果无法显示,可以尝试将服务器协议修改为https。框架目标应该是支持http的。

3.4 Axhub Charts法

Axhub Charts法是引用别人做好的组件,通过配置组件提供的修改方式,动态修改图表内容。详情请移步至Axhub官网:https://axhub.im/charts/,他提供两种版本,一种是免费版本,一种是收费版本。免费版本只支持echarts、antV的部分图表,收费版本几乎全部支持。

优点:使用简单、易学、展示效果好(动态图表)

缺点:如果图表示例不满足需求,需要修改,则修改麻烦,需要对照参数一一调整,无法立即看到调整结果,所见不所得。

3.5JS调用法

JS调用法是图表应用最高阶用法,这一切要起源于axure设计的一个最强大的功能:Axure支持javascript原生语法调用,这也是axure与其他原型设计软件的最大不同之处。那么下面,我将会重点介绍如何利用axure的这个强大功能实现ECharts、AntV的图表调用。实现随用随改、图表动态展示、快速构建数据看板的目标。

下文我会为大家详细介绍axure实现JS调用的方法,axure如何实现ECharts的调用,学会基础方法,可以修改90%的ECharts图表,学会进阶方法,可以修改98%的ECharts图表(同时支持4.x和5.x);本文暂不提供axure实现AntV的调用,如有兴趣,可购买笔者的产品,Axure图表元件库。或者私信笔者。学会AntV调用的基础方法,可以修改95%的AntV图表,学会进阶方法,可以修改100%的antV(支持4.x,之前的版本未验证,但应该是支持的)图表。至于echarts的另外2%则需要JavaScript语法,或者找前端的同学配合则可解决。学会调用echasrts的基础方法只需要您花上3分钟。

优点:使用简单、修改简单(在ECharts、AntV修改好后,复制代码立马可用,所见即所得)、展示效果好(动态图表)

缺点:基础调用方法学习简单,进阶调用方法学习麻烦。

基础方法

  • 在axure中新建一个矩形,命名为“bar1”,记住这个名称,后面改代码会用到它。

  • 设置矩形的用例,载入时,选中自己。然后,点击打开链接。

  • 按下图点击右边的“fx”。

  • 将下列代码复制到如图方框中。

代码如下:

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=bar1]’).get(0);

var myChart = echarts.init(dom);

option = {

xAxis: {

type: ‘category’,

data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]

},

yAxis: {

type: ‘value’

},

grid:{

containLabel:true,

top: 15,

left: 15,

bottom: 15,

right: 15

},

series: [{

data: [120, 200, 150, 80, 70, 110, 130],

type: ‘bar’,

showBackground: true,

backgroundStyle: {

color: ‘rgba(180, 180, 180, 0.2)’

}

}]

};

if (option && typeof option === “object”){

myChart.setOption(option, true);

}}, 800);

如果出现下图就代表你成功了。

现在我把本代码的注释版黏贴在下:

javascript:

//引入ECharts库

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

//获取插入的矩形框对象,bar1是上面取得名字,如果是其它名字,则进行替换

//这里用了定时器来延迟图表载入时间,测试时发现刚引入ECharts库就执行图形代码可能会出错。

setTimeout(function(){

//获取插入的bar1矩形框,作为图表绘制的容器,如果前面矩形框为其它名字,则bar1改为对应的名字

var dom =$(‘[data-label=bar1]’).get(0);

//初始化

var myChart = echarts.init(dom);

var option = {

/*在此处粘贴ECharts官网的示例代码*/

};

//设置数据

if (option && typeof option === “object”){

myChart.setOption(option, true);

}}, 800);

参考文章:https://www.pmyes.com/thread-35156.htm

下面我带你修改一个实例:

进入echarts官网,选择一个你中意的图表,进入它的代码编辑页面,如下图:

为了避免语法错误,直接全选“option ={…};”

然后替换刚刚那段代码下图部分:

结果如下:

按照前文所讲的,将此段代码复制进矩形的打开链接的“fx”函数中。

在axure中如下图显示:

按f5运行出现柱状图就说明你成功了。

刚才的方法当然不是万能的,不行你试试它:

var labelRight = {

position: ‘right’

};

option = {

title: {

text: ‘交错正负轴标签’,

subtext: ‘From ExcelHome’,

sublink: ‘http://e.weibo.com/1341556070/AjwF2AgQm’

},

tooltip: {

trigger: ‘axis’,

axisPointer: {            // 坐标轴指示器,坐标轴触发有效

type: ‘shadow’        // 默认为直线,可选为:’line’ | ‘shadow’

}

},

grid: {

top: 80,

bottom: 30

},

xAxis: {

type: ‘value’,

position: ‘top’,

splitLine: {

lineStyle: {

type: ‘dashed’

}

}

},

yAxis: {

type: ‘category’,

axisLine: {show: false},

axisLabel: {show: false},

axisTick: {show: false},

splitLine: {show: false},

data: [‘ten’, ‘nine’, ‘eight’, ‘seven’, ‘six’, ‘five’, ‘four’, ‘three’, ‘two’, ‘one’]

},

series: [

{

name: ‘生活费’,

type: ‘bar’,

stack: ‘总量’,

label: {

show: true,

formatter: ‘{b}’

},

data: [

{value: -0.07, label: labelRight},

{value: -0.09, label: labelRight},

0.2, 0.44,

{value: -0.23, label: labelRight},

0.08,

{value: -0.17, label: labelRight},

0.47,

{value: -0.36, label: labelRight},

0.18

]

}

]

};

这就需要进阶方法了,想进一步了解,可购买笔者的产品,Axure图表元件库。或者私信笔者。

部分效果预览:

4.数据看板的前景

数据看板的本质是对业务运行情况的图形化展示,往深一点、大一点的方向来说,也可以算作是大数据分析的一种展现形式,随着人们对业务的理解深入,数据看板能够为企业的决策者提供一些决策依据,在企业的信息化中,也逐渐受到了决策者的重视,所以快速制作数据看板原型是一件高频率、长期性的需求。从互联网当前的工具来看,在axure中使用JS调用图表的方法,是最灵活、便捷、展示效果较好的最好选择。

 

给TA买糖
共{{data.count}}人
人已赞赏
高级教程

Axure教程——用中继器做穿梭框

2021-4-8 17:51:18

高级教程

【Axure 教程】中继器高级用法-下拉多选

2021-5-12 21:44:34

axure商城
8 条回复 A文章作者 M管理员
  1. 一只咩

    我用的js调用法,按照上诉步骤,为什么预览了矩形框里是空白,请指教

    • 唐隐

      咋解决的呀 快说说 我的病症和你一样

  2. 🌟108324

    学到了

  3. 不是纯纯的milk

    JS方法只能用一些简单的图表吧。稍微复杂的可不止option呢

    • howl1213

      更复杂的图表在我的图表元件库附赠教程中有提及,方法很通用,需要自己花时间调。目前我的元件库已实现echarts、antv90%以上图表,足够用了

  4. howl1213

    有教程的话不难吧。篇幅很大,是因为用文字描述和贴代码太多了。离线版本,应用的场景是什么?

  5. 符号

    之前我搞离线版本,也成功植入到axure了,但因为js文件太大,导致axure奔溃了。后面就放弃了。对一些小白来说,还是太难了😂

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索