通过echarts绘制双十一销量实时统计图表

本文链接：https://blog.csdn.net/cybozu/article/details/102910619

echarts 是apache的一个孵化项目，这次我们利用它的api，来实现了kintone门户页面的双十一的销量实时统计的Dashboard 。

我们先看下效果图。

0015db7d84dd9dbb4d488351a9a9401

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

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

公用的库

下面是我们要用到的库：

echarts

kintone JS SDK

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

graph.js

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

(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.o