双十一销售额数据实时更新（双十一销量实时统计图表）

前言

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

我们先看下效果图
  
 
  
 
  
 
  
 
  
 
  
 
  
。

折线图显示了双十一期间的产品销量走势
 


 


 


 


 


 


 

，而饼图则显示了各渠道的产品销量的占比
 
 
 
 
 
 
，同时他们都是实时变化的












。

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

公用的库

下面是我们要用到的库：

echarts

kintone JS SDK

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

应用的自定义开发

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


 


 


 


 


 


 
。

Stp1: 创建新应用

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

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

选择模板压缩文件后

 

 

 

 

 

 

，点击创建应用              ，便创建完成了
   
   
   
   
   
   
  。

（模板下载地址：双十一销量统计模板）

Step3: 创建JavaScript文件

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

· 因为代码已经对应了手机端和电脑端
 
 

 
 

 
 

 
 

 
 

 
 

 
 ，所以可以使用相同的js文件
 

 

 

 

 

 

 
。

·请注意文件的导入顺序 

 

 

 

 

 

 
。

step5： 添加模拟数据

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

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

详情页和列表页显示效果

完成自定义和添加数据之后













，在列表页和详情页就能看到通过echars生成的图表了

 
 

 
 

 
 

 
 

 
 

 
 

 
。

应用详情页

应用列表页

手机端画面

门户的自定义开发

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












。

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

具体代码包括首页的实时变化数据的图表代码请参考完整文章：

https://cybozudev.kf5.com/hc/kb/article/1321710/?from=cnblog