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(阿里)
  • 帆软（自主厂商）
  • ChartCube(阿里)
  • 图说（百度）

扩展阅读

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调用图表的方法，是最灵活、便捷、展示效果较好的最好选择。

 

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