「3数据可视化」如何把数据可视化做得简单

随着科技的发展，产业升级成功的一个重要标志是：工作任务能够“螺丝钉化”，而在这个过程中，需要把一个项目中的任务合理地拆分成耦合程度最小的单元。比如数据科学，如果有一天在各行业数据采集、处理、可视化、分析、安全等每一项任务能够由专门的小组来完成（每一项工作将做得更出色），而不是由一个人把这些工作都做了的话，那么数据科学领域的产业升级可以说是成功的。

ofter今天以数据可视化为例，来讲讲如何把数据可视“螺丝钉化”，未来我们还可以衍生到数据科学。

目前，有2类人正在或迫切需要学习和使用数据可视化。

分析师通常都有量化分析的背景，但很少受过设计方面的专业训练，虽然能够胜任数据分析的其他环节（获取数据、清洗整理数据、分析数据、建立模型），但在最终的展示沟通上力不从心，而展示恰恰是整个数据分析流程中最终受众能够接触到的唯一环节。因此，对于分析师来说，只需要找一个易用的图表工具。

无论是销售、产品、财务、采购，还是其他岗位，其实数据可视化的迫切性并不比分析师低。从以下例子可以看出，他们需要的是易用的数据工具和图表工具。

例子1：ofter几年前做过业务，每个月需要向总经理汇报业务情况，当时采用的是excel汇总统计的方式，站在个人角度看，最大的痛点是数据部分，因为我们都是每个月各销售维护自己的客户数据，在excel上维护经常会出现打架的问题，每次做图表时我还要去汇总这些数据，经过那么多人的协同作业，效率反而低下，也容易出错。通常是大家经过8个小时的汇总、核对数据，最后得到了如下图的2张图表，然后在销售会议上汇报一下就扔回收站了。

数据可视化是一项涉及数据和图表的工作，ofter将动态数据可视简单化过程主要分为3个阶段。

（1）数据+图表：全部代码；（完全自定义）

（2）数据：代码+图表：无代码；数据：无代码+图表：代码；（图表前端编写代码，可以自定义图表类型和样式）

（3）数据+图表：全部无代码。（数据、图表类型、样式等需提前封装）

ofter认为目前市面上的平台更多注重了图表功能的开放，而数据部分功能很鸡肋（主要指付费平台），他们提供了excel上传、api接口、数据库连接、静态json数据集之类获取数据的功能。

对于第（2）类大多数非技术人员来说，api接口、连接数据库、静态json数据集是需要付出很多时间和精力才能使用的功能，而这个excel上传只能一次性使用，无法线上协同修改数据，图表中的数据也是无法动态和实时更新。当然他们的目标群体本来就不是普通大众。

一般企业/组织的数据都是结构化和标准化的，因此采用关系型数据库SQL比较普遍，需要在SQL中先建立数据库表和列名，表之间的关系也需要提前定义，这就需要比较好的逻辑能力。

然后在编译工具中编写从数据库取数的代码，将数据用于图表的展现。

,Pageimportpymysqlfromoperatorimportitemgetterdefbar(cos):#柱状图costomer=list(map(itemgetter(0),cos))quantity=list(map(itemgetter(1),cos))c=(Bar(init_opts=(bg_color="white")).add_xaxis(costomer).add_yaxis("订单数量",quantity).set_series_opts(label_opts=(is_show=False)).set_global_opts(title_opts=("客户订单数量"),datazoom_opts=(is_show=True,range_start=0,range_=100),toolbox_opts=(orient="vertical",pos_left="90%",feature=(data_zoom=(is_show=False)))))returncdb=(host="localhost",user="root",password="123456",database="warehouse_input")sql="selectcustomer_name,sum(cloth_quantity)ASnumsfrompoGROUPBYcustomer_name"try:cursor=()(sql)cos=()exceptExceptionase:()print('事物处理失败',e)else:()print('事物处理成功',cos)()()page=Page()(bar(cos))("")

当我们需要呈现不同数据的时候，如果采用关系型数据库，势必需要维护数据库和编写代码。当非关系型数据库NoSQL出现后，这就不是问题了，常见的需求如数据可查询、添加、编辑、删除、导入、导出。

对于操作者来说，只需要将excel数据初始化上传至系统中，系统会自动解析列名和数据，可以参考ofter数据平台[1]：

而且非关系型数据库中的数据库表也很干净，除了用户管理表users，就是数据源的表connects。

目前，绘制图表的库非常多，对于高度定制化的图表，这些库将帮助开发者减少很多时间。

常用图表库如下：

为了让开发图表变得越来越便捷，这些图表库的开发人员也是煞费苦心。如果我们觉得echarts这种大而全的库太繁杂，我们可以选择基于echarts的其他库，其中最典型的当属v-charts[2]，一行代码就可以绘制可视化图表。

template部分（一行代码）：

templateve-scatter:data="dataset"///一行代码/template

script部分（静态数据）:

scriptexportdefault{name:'MyScreen',data(){return{dataset:{columns:['日期','余额','数量','年龄'],rows:{'上海':[{'日期':'1-1','余额':123,'年龄':3,'数量':1244},{'日期':'1-2','余额':1223,'年龄':6,'数量':2344},{'日期':'1-3','余额':7123,'年龄':9,'数量':3245},{'日期':'1-4','余额':4123,'年龄':12,'数量':4355},{'日期':'1-5','余额':3123,'年龄':15,'数量':4564},{'日期':'1-6','余额':2323,'年龄':20,'数量':6537}],'北京':[{'日期':'1-1','余额':123,'年龄':3,'数量':1244},{'日期':'1-2','余额':1273,'年龄':6,'数量':2344},{'日期':'1-3','余额':3123,'年龄':15,'数量':4564},{'日期':'1-4','余额':2123,'年龄':9,'数量':3245},{'日期':'1-5','余额':4103,'年龄':12,'数量':4355},{'日期':'1-6','余额':7123,'年龄':10,'数量':3567}],'广州':[{'日期':'1-1','余额':123,'年龄':3,'数量':1244},{'日期':'1-2','余额':1223,'年龄':6,'数量':2344},{'日期':'1-3','余额':2123,'年龄':30,'数量':3245},{'日期':'1-5','余额':4123,'年龄':12,'数量':4355},{'日期':'1-4','余额':5123,'年龄':18,'数量':4564},{'日期':'1-6','余额':3843,'年龄':30,'数量':4850}]}}}}}/script

运行结果：

如果我们希望把图表绘制得更漂亮些，比如下图这样：

我们需要做的也就是添加下配置项：

textStyle:{fontFamily:'Inter,"HelveticaNeue",Arial,sans-serif'},title:{text:""},leg:{right:10,data:["1990","2015"]},xAxis:{splitLine:{lineStyle:{type:"dashed"}}},yAxis:{splitLine:{lineStyle:{type:"dashed"}},scale:true},

普遍的图表需求不外乎：

常用的图表库：折线图、柱状图、条形图、表格、饼图、排名图等；

图表样式可自定义：文字、颜色、标题、图例等；

组件丰富：可编辑的文字、边框、背景、动态的图表。

对于常规的图表需求，无代码图表平台可以很大程度上提高操作的便捷性，但是个性化的数据、图表需求让无代码平台变得不那么智能，二次开发的工作量甚至大大超过了自定义代码编写图表。ofter也会开发一些大屏模板：

这样的模板，看起来确实充满科技感，但是复用性极低。除了自己练手和赏心悦目以外，它就是个成功的落灰案例。

以js+mongodb为例，我们需要实现数据的添加、查询和修改。当然也可以使用python+mongodb等，自由选择。

//连接数据库("mongodb://localhost:27017/diagramData",{useNewUrlParser:true},err={if(err){('[server]MongoDBconnecterror:'+err);}else{('[server]MongoDBconnected!');}});

在这里需要注意数据库的安全，我们需要做以下几件事：

服务器的入向规则，千万不要，使用后要及时禁用，很容易遭受勒索病毒的侵袭；

配置中，保持bind_ip=127.0.0.1，不要改为0.0.0.0；

在以上两条基础上，最好设置下auth=true，设置授权用户和密码。

//新增excel数据源('/',async(ctx,next)={constbody=;if(!||!){={errno:1,errmsg:'格式错误'}return;}constresult=({name:,data:,uid:,});={errno:0,data:result}});//添加单条数据('/:id',async(ctx,next)={constbody=;if(!){={errno:1,errmsg:'格式错误'}return;}constresult=({_id:},{$push:{'':}})={errno:0,data:result}});

//获取全部数据源列表('/',async(ctx,next)={constrows=({'uid':}).select('-data');={errno:0,data:{connectList:rows}}});//获取某一数据源详情('/:id',async(ctx,next)={constitem=();={errno:0,data:item}});

//修改数据('/:id/:index',async(ctx,next)={constbody=;constrowIndex==({_id:},{$set:{[''+rowIndex]:}})={errno:0,data:result}});

当我们完成了数据部分，图表部分获取数据将变得非常方便。只要复制数据源的id，经过getDataItem函数的处理，我们就可获取到数据库中的数据。另外，图表会按我们定义的时间1000*3600（3600s）自动刷新数据和更新图表。

getDataItem代码：

exportfunctiongetDataItem(id){returnrequest({url:'/connect/'+id,method:'get',params:{}})}

图表代码：

templateve-histogram:data="chartData"width="58vh"height="40vh"@ready-once="generateData()"//templatescriptimport{getDataItem}from'@/api/connect'letbar1='629b177756b1eXXXXXX'//数据源IDexportdefault{name:'VeBar1',data(){return{chartData:{},}},mounted(){()=setInterval(()={()//需要刷新的数据},1000*3600)},beforeDestroy(){clearInterval()=null},methods:{generateData(){getDataItem(bar1).then((res)={const{errno,data}=resif(errno===0){=}}).catch(()={})},refreshData(){()}}}/script

运行效果：

最后，我们一定要不断审视数据可视化的目标：

如何让数据可视起到驱动决策的作用；

如何让数据可视做得越来越简单。

“数据将取代石油，成为新时代最重要的资源。”当数据可视化成为一项普适技能时，ofter相信我们的产业必定已经跨上了一个台阶。当下我们对智慧XX大屏的投入不小，那它是如何起到数据驱动决策，又是如何做得简单化的？

体验地址：

用户密码：ofter/Ofter_123

备注：因为不希望删除功能影响可视化大屏的效果呈现，已把删除功能抹掉了。

VeBar,VeLine,VeHistogram,VePie,VeRing,VeWaterfall,VeFunnel,VeRadar,VeChart,VeMap,VeSankey,VeHeatmap,VeScatter,VeCandle,VeGauge,VeTree,VeLiquidfill,VeWordcloud