雙十一銷量實時統計圖表

来源:https://www.cnblogs.com/cybozu/archive/2023/01/27/17069113.html
-Advertisement-
Play Games

閉包和作用域 變數聲明 var 聲明特點 在使用var聲明變數時，變數會被自動添加到最接近的上下文 var存在聲明提升。var聲明會被拿到函數或全局作用域的頂部，位於作用域中所有代碼之前。 可多次重覆聲明。而重覆的var聲明則會被忽略 let 聲明特點 let聲明存在塊級作用域 let聲明（創建過程 ...


前言

echarts 是apache的一個孵化項目，這次我們將它和kintone進行整合，實現了kintone門戶頁面的雙十一的銷量實時統計的Dashboard 。

我們先看下效果圖。

0015db7d84dd9dbb4d488351a9a9401

折線圖顯示了雙十一期間的產品銷量走勢，而餅圖則顯示了各渠道的產品銷量的占比，同時他們都是實時變化的。

接下來我們就來看下它是怎麼實現的。

公用的庫

下麵是我們要用到的庫：

echarts

kintone JS SDK

※ 這裡不對這兩個庫做具體介紹，如果還不熟悉它們，請先參閱相關文檔。

應用的自定義開發

我們先來模擬一個kintone的銷量統計的應用。

Stp1: 創建新應用

選擇“通過導入模板文件創建”。

0015db7f1e9ae69a9c8496e8b84fcb7

Step2: 通過導入模板文件創建

選擇模板壓縮文件後，點擊創建應用，便創建完成了。

（模板下載地址：雙十一銷量統計模板）

0015db7f35581b41562e21ff0a20b39

Step3: 創建JavaScript文件

(function () {
    'use strict';
    kintone.events.on(['app.record.detail.show', 'app.record.edit.show'], function (res) {
        const pcSetting = {
            type: 'pc',
            showContent: true,
            style: "width: 600px;height:400px;",
        };
        generateDetail(pcSetting, res);
    });
    kintone.events.on(['mobile.app.record.detail.show', 'mobile.app.record.edit.show'], function (res) {
        const mobileSetting = {
            type: 'mobile',
            showContent: false,
            style: "width: 350px;height:400px;",
        };
        generateDetail(mobileSetting, res);
    });
    kintone.events.on(['app.record.index.show'], function (res) {
        const pcSetting = {
            type: 'pc',
            showContent: true,
            style: "width: 900px;height:400px;"
        };
        generateTotal(pcSetting);
    });
    kintone.events.on(['mobile.app.record.index.show'], function (res) {
        const mobileSetting = {
            type: 'mobile',
            showContent: false,
            style: "width: 350px;height:400px;"
        };
        generateTotal(mobileSetting);
    });
    function generateDetail(setting, res) {
        var record = res.record;
        var report_el;
        if (setting.type === "mobile") {
            report_el = kintone.mobile.app.record.getSpaceElement("report");
        }
        else {
            report_el = kintone.app.record.getSpaceElement("report");
        }
        var report_div = document.createElement('div');
        report_div.id = "graph";
        report_div.style = setting.style;
        var myChart = echarts.init(report_div);
        var option = {
            title: {
                text: '各渠道銷量統計',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)",
                showContent: setting.showContent
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['京東', '淘寶', '拼多多', '天貓', '考拉']
            },
            series: [
                {
                    name: '假期類型',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: record.channel1.value, name: '京東' },
                        { value: record.channel2.value, name: '淘寶' },
                        { value: record.channel3.value, name: '拼多多' },
                        { value: record.channel4.value, name: '天貓' },
                        { value: record.channel5.value, name: '考拉' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
        report_el.appendChild(report_div);
    }
    function generateTotal(setting) {
        if (document.getElementById('graph') !== null) {
            return;
        }
        var graph = document.createElement('div');
        graph.id = 'graph';
        graph.style = setting.style;
        var app;
        if (setting.type === "mobile") {
            kintone.mobile.app.getHeaderSpaceElement().appendChild(graph);
            app = kintone.mobile.app.getId();
        }
        else {
            kintone.app.getHeaderSpaceElement().appendChild(graph);
            app = kintone.app.getId();
        }
        var myChart = echarts.init(graph);
        var kintoneRecord = new kintoneJSSDK.Record();
        var rcOption = {
            app: app,
            query: 'order by date asc'
        };
        kintoneRecord.getAllRecordsByCursor(rcOption).then((rsp) => {
            var records = rsp.records;
            var graphData = { 'channel1': [], 'channel2': [], 'channel3': [], 'channel4': [], 'channel5': [] };
            var dateArray = [];
             for (var j = 0; j < records.length; j++) {
                var record = records[j];
                var dateKey = record.date.value;
                graphData.channel1.push(record.channel1.value);
                graphData.channel2.push(record.channel2.value);
                graphData.channel3.push(record.channel3.value);
                graphData.channel4.push(record.channel4.value);
                graphData.channel5.push(record.channel5.value);
                dateArray.push(dateKey);
            }
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    showContent: setting.showContent
                },
                legend: {
                    data: ['京東', '淘寶', '拼多多', '天貓', '考拉']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: dateArray
                },
                series: [
                    {
                        name: '京東',
                        type: 'bar',
                        stack: '總量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: graphData.channel1
                    },
                    {
                        name: '淘寶',
                        type: 'bar',
                        stack: '總量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: graphData.channel2
                    },
                    {
                        name: '拼多多',
                        type: 'bar',
                        stack: '總量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: graphData.channel3
                    },
                    {
                        name: '天貓',
                        type: 'bar',
                        stack: '總量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: graphData.channel4
                    },
                    {
                        name: '考拉',
                        type: 'bar',
                        stack: '總量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: graphData.channel5
                    }
                ]
            };
            myChart.setOption(option);
        }).catch((err) => {
            document.getElementById('graph').innerText = "獲取數據失敗";
        });
    }
}());

Step4: 導入自定義開發文件到kintone

· 因為代碼已經對應了手機端和電腦端，所以可以使用相同的js文件。

· 請註意文件的導入順序。

0015db7f735bfefce3b27669d4e262b

step5： 添加模擬數據

接下來讓我們來添加一些模擬數據吧。

請添加2019-11-05~2019-11-11 這幾天的模擬數據：

0015db7ff68411315565600c10eccac

詳情頁和列表頁顯示效果

完成自定義和添加數據之後，在列表頁和詳情頁就能看到通過echars生成的圖表了。

應用詳情頁
0015db7f866d68e5dffdbae6b2aa231

應用列表頁
0015db7f8f79e6a6ab518a7241a3335

手機端畫面
   0015db7fadf37447648bdada5abd91b  0015db7fade858808a05943d7ec866d

門戶的自定義開發

應用完成之後，我們現在就來利用kintone的門戶首頁顯示事件來自定義首頁的Dashboard 。

註意：此開發需有系統管理員許可權。

具體代碼包括首頁的實時變化數據的圖表代碼請參考完整文章：

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • windows2003 的安裝以及安裝時遇到的問題
    windows2003 的安裝以及安裝時遇到的問題簡介：Windows Server 2003是微軟於2003年3月28日發佈的基於Windows XP/NT5.1開發的伺服器操作系統，併在同年4月底上市。Windows Server 2003的官方支持即已在2015年7月14日結束，Windows ...
  • Keepalived高可用集群部署
    前言 Proteus 新建工程雖然不難，但對於電子小白來說可能便成了學習路上的絆腳石，本篇我將逐步講解如何在 Proteus 中新建工程。 最新版 Proteus 8.15 最新版 Proteus 8.15 現已發佈，我為此編寫了詳細的圖文安裝教程並配有安裝包，需要安裝的朋友請跳轉進行安裝。 Pro ...
  • 唯一/普通索引的選擇？change buffer
    2023-01-27 一、redis數據類型（ZSet） redis中的zset是一個有序集合，是一個沒有重覆元素的字元串集合。 註意：①zset中的每個成員都關聯了一個評分，這個評分是從最低分到最高分的方式進行排序的。 ②集合的成員是唯一的，但是評分可以是重覆的。 （1）將一個或多個member元 ...
  • 學習筆記——redis中的數據類型（List、Set、Hash）
    2023-01-25 一、redis中的數據類型 1、redis列表（List） redis列表底層是一個雙向鏈表。 （1）從左邊/右邊插入一個或多個值 lpush/rpush <key><value1><value2><value3> 例如： （2）從左邊/右邊吐出一個值。值在鍵在，值光鍵亡 lp ...
  • 統一觀測丨如何使用 Prometheus 監控 MySQL
    MySQL 作為最流行的關係型資料庫管理系統之一，非常多系統的後端存儲都有著MySQL 的身影，可謂是廣泛應用於各行各業。與此同時，資料庫作為應用服務的核心組件，直接影響著應用服務運行。資料庫的瓶頸往往也是整個系統的瓶頸，其重要性不言而喻，所以對於 MySQL 的監控必不可少，及時發現 MySQL ... ...
  • 學習筆記——安卓的下載路徑；創建一個空的安卓project；Android中的日誌工具劃分
    2023-01-27 一、安卓（Android Studio）的下載路徑 https://developer.android.google.cn/studio/ 二、創建一個空的安卓project 1、打開安卓後，點擊“New Project” 2、點擊選擇一個“空的安卓項目” 3、選擇文件存放路徑 ...
  • Angularjs的重要概念
    AngularJS的重要概念 MVC模式 AngularJS最早按照MVC模式設計，在這種設計模式下，AngularJS組件可以分為： M: Model，即模型，是應用程式中用於處理應用程式數據邏輯的部分，在AngularJS中: 即作用域對象(當前為$rootScope), 它可以包含一些屬性或方 ...
  • 【Photoshop】切圖保存小坑（選擇png格式得到gif問題）
    預設情況下：Photoshop 導出切片為【GIF】格式 當你很嗨皮的把【GIF】調整為【PNG】或【JPG】格式，並保存時： 你會發現，自己的圖片格式莫名其妙還是【GIF】： 但，我們的期望是： 原因是“因為我們沒有選中全部切片，並將其格式設置為【PNG】”，解決方案（選中全部切片設置為png或其 ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類