双十一销量实时统计图表

可羞

前言

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

折线图显示了双十一期间的产品销量走势，而饼图则显示了各渠道的产品销量的占比，同时他们都是实时变化的。
接下来我们就来看下它是怎么实现的。
公用的库

下面是我们要用到的库：
echarts
kintone JS SDK
※ 这里不对这两个库做具体介绍，如果还不熟悉它们，请先参阅相关文档。
应用的自定义开发

我们先来模拟一个kintone的销量统计的应用。
Stp1: 创建新应用

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

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

选择模板压缩文件后，点击创建应用，便创建完成了。
（模板下载地址：双十一销量统计模板）

Step3: 创建JavaScript文件

1. (function () {
2.     'use strict';
3.     kintone.events.on(['app.record.detail.show', 'app.record.edit.show'], function (res) {
4.         const pcSetting = {
5.             type: 'pc',
6.             showContent: true,
7.             style: "width: 600px;height:400px;",
8.         };
9.         generateDetail(pcSetting, res);
10.     });
11.     kintone.events.on(['mobile.app.record.detail.show', 'mobile.app.record.edit.show'], function (res) {
12.         const mobileSetting = {
13.             type: 'mobile',
14.             showContent: false,
15.             style: "width: 350px;height:400px;",
16.         };
17.         generateDetail(mobileSetting, res);
18.     });
19.     kintone.events.on(['app.record.index.show'], function (res) {
20.         const pcSetting = {
21.             type: 'pc',
22.             showContent: true,
23.             style: "width: 900px;height:400px;"
24.         };
25.         generateTotal(pcSetting);
26.     });
27.     kintone.events.on(['mobile.app.record.index.show'], function (res) {
28.         const mobileSetting = {
29.             type: 'mobile',
30.             showContent: false,
31.             style: "width: 350px;height:400px;"
32.         };
33.         generateTotal(mobileSetting);
34.     });
35.     function generateDetail(setting, res) {
36.         var record = res.record;
37.         var report_el;
38.         if (setting.type === "mobile") {
39.             report_el = kintone.mobile.app.record.getSpaceElement("report");
40.         }
41.         else {
42.             report_el = kintone.app.record.getSpaceElement("report");
43.         }
44.         var report_div = document.createElement('div');
45.         report_div.id = "graph";
46.         report_div.style = setting.style;
47.         var myChart = echarts.init(report_div);
48.         var option = {
49.             title: {
50.                 text: '各渠道销量统计',
51.                 x: 'center'
52.             },
53.             tooltip: {
54.                 trigger: 'item',
55.                 formatter: "{a} <br/>{b} : {c} ({d}%)",
56.                 showContent: setting.showContent
57.             },
58.             legend: {
59.                 orient: 'vertical',
60.                 left: 'left',
61.                 data: ['京东', '淘宝', '拼多多', '天猫', '考拉']
62.             },
63.             series: [
64.                 {
65.                     name: '假期类型',
66.                     type: 'pie',
67.                     radius: '55%',
68.                     center: ['50%', '60%'],
69.                     data: [
70.                         { value: record.channel1.value, name: '京东' },
71.                         { value: record.channel2.value, name: '淘宝' },
72.                         { value: record.channel3.value, name: '拼多多' },
73.                         { value: record.channel4.value, name: '天猫' },
74.                         { value: record.channel5.value, name: '考拉' }
75.                     ],
76.                     itemStyle: {
77.                         emphasis: {
78.                             shadowBlur: 10,
79.                             shadowOffsetX: 0,
80.                             shadowColor: 'rgba(0, 0, 0, 0.5)'
81.                         }
82.                     }
83.                 }
84.             ]
85.         };
86.         myChart.setOption(option);
87.         report_el.appendChild(report_div);
88.     }
89.     function generateTotal(setting) {
90.         if (document.getElementById('graph') !== null) {
91.             return;
92.         }
93.         var graph = document.createElement('div');
94.         graph.id = 'graph';
95.         graph.style = setting.style;
96.         var app;
97.         if (setting.type === "mobile") {
98.             kintone.mobile.app.getHeaderSpaceElement().appendChild(graph);
99.             app = kintone.mobile.app.getId();
100.         }
101.         else {
102.             kintone.app.getHeaderSpaceElement().appendChild(graph);
103.             app = kintone.app.getId();
104.         }
105.         var myChart = echarts.init(graph);
106.         var kintoneRecord = new kintoneJSSDK.Record();
107.         var rcOption = {
108.             app: app,
109.             query: 'order by date asc'
110.         };
111.         kintoneRecord.getAllRecordsByCursor(rcOption).then((rsp) => {
112.             var records = rsp.records;
113.             var graphData = { 'channel1': [], 'channel2': [], 'channel3': [], 'channel4': [], 'channel5': [] };
114.             var dateArray = [];
115.              for (var j = 0; j < records.length; j++) {
116.                 var record = records[j];
117.                 var dateKey = record.date.value;
118.                 graphData.channel1.push(record.channel1.value);
119.                 graphData.channel2.push(record.channel2.value);
120.                 graphData.channel3.push(record.channel3.value);
121.                 graphData.channel4.push(record.channel4.value);
122.                 graphData.channel5.push(record.channel5.value);
123.                 dateArray.push(dateKey);
124.             }
125.             var option = {
126.                 tooltip: {
127.                     trigger: 'axis',
128.                     axisPointer: {
129.                         type: 'shadow'
130.                     },
131.                     showContent: setting.showContent
132.                 },
133.                 legend: {
134.                     data: ['京东', '淘宝', '拼多多', '天猫', '考拉']
135.                 },
136.                 grid: {
137.                     left: '3%',
138.                     right: '4%',
139.                     bottom: '3%',
140.                     containLabel: true
141.                 },
142.                 xAxis: {
143.                     type: 'value'
144.                 },
145.                 yAxis: {
146.                     type: 'category',
147.                     data: dateArray
148.                 },
149.                 series: [
150.                     {
151.                         name: '京东',
152.                         type: 'bar',
153.                         stack: '总量',
154.                         label: {
155.                             normal: {
156.                                 show: true,
157.                                 position: 'insideRight'
158.                             }
159.                         },
160.                         data: graphData.channel1
161.                     },
162.                     {
163.                         name: '淘宝',
164.                         type: 'bar',
165.                         stack: '总量',
166.                         label: {
167.                             normal: {
168.                                 show: true,
169.                                 position: 'insideRight'
170.                             }
171.                         },
172.                         data: graphData.channel2
173.                     },
174.                     {
175.                         name: '拼多多',
176.                         type: 'bar',
177.                         stack: '总量',
178.                         label: {
179.                             normal: {
180.                                 show: true,
181.                                 position: 'insideRight'
182.                             }
183.                         },
184.                         data: graphData.channel3
185.                     },
186.                     {
187.                         name: '天猫',
188.                         type: 'bar',
189.                         stack: '总量',
190.                         label: {
191.                             normal: {
192.                                 show: true,
193.                                 position: 'insideRight'
194.                             }
195.                         },
196.                         data: graphData.channel4
197.                     },
198.                     {
199.                         name: '考拉',
200.                         type: 'bar',
201.                         stack: '总量',
202.                         label: {
203.                             normal: {
204.                                 show: true,
205.                                 position: 'insideRight'
206.                             }
207.                         },
208.                         data: graphData.channel5
209.                     }
210.                 ]
211.             };
212.             myChart.setOption(option);
213.         }).catch((err) => {
214.             document.getElementById('graph').innerText = "获取数据失败";
215.         });
216.     }
217. }());

复制代码

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

· 因为代码已经对应了手机端和电脑端，所以可以使用相同的js文件。
· 请注意文件的导入顺序。

step5： 添加模拟数据

接下来让我们来添加一些模拟数据吧。
请添加2019-11-05~2019-11-11 这几天的模拟数据：

详情页和列表页显示效果

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

应用列表页

手机端画面
   

  

门户的自定义开发

应用完成之后，我们现在就来利用kintone的门户首页显示事件来自定义首页的Dashboard 。
注意：此开发需有系统管理员权限。
具体代码包括首页的实时变化数据的图表代码请参考完整文章：
https://cybozudev.kf5.com/hc/kb/article/1321710/?from=cnblog

来源:https://www.cnblogs.com/cybozu/p/17069113.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！