双十一销量实时统计图表

152 阅读2分钟

前言

echarts 是apache的一个孵化项目,这次我们将它和kintone进行整合,实现了kintone门户页面的双十一的销量实时统计的Dashboard 。

我们先看下效果图。

双十一.gif

折线图显示了双十一期间的产品销量走势,而饼图则显示了各渠道的产品销量的占比,同时他们都是实时变化的。

接下来我们就来看下它是怎么实现的。

公用的库

下面是我们要用到的库:

echarts

kintone JS SDK

※ 这里不对这两个库做具体介绍,如果还不熟悉它们,请先参阅相关文档。

应用的自定义开发

我们先来模拟一个kintone的销量统计的应用。

Stp1: 创建新应用

选择“通过导入模板文件创建”。

b1053.png

Step2: 通过导入模板文件创建

选择模板压缩文件后,点击创建应用,便创建完成了。

(模板下载地址:双十一销量统计模板

b1054.png

Step3: 创建JavaScript文件

graph.js

(应用列表页和应用详情页显示绘图的js,为了方便这边将pc端和mobile端的代码整合到了一起。)

Step4: 导入自定义开发文件到kintone

· 因为代码已经对应了手机端和电脑端,所以可以使用相同的js文件。

· 请注意文件的导入顺序。

b1058.png

step5: 添加模拟数据

接下来让我们来添加一些模拟数据吧。

请添加2019-11-05~2019-11-11 这几天的模拟数据:

b1067.png

详情页和列表页显示效果

完成自定义和添加数据之后,在列表页和详情页就能看到通过echars生成的图表了。

应用详情页

b1059.png

应用列表页

b1061.png

手机端画面

70465074.jpeg

1027828787.jpeg

门户的自定义开发

应用完成之后,我们现在就来利用kintone的门户首页显示事件来自定义首页的Dashboard 。

注意:此开发需有系统管理员权限。

具体代码包括首页的实时变化数据的图表代码请参考完整文章: 双十一销量实时统计图表 - cybozu - cybozu开发者网站