粒子计数器

1.1 应用场景

粒子计数器为大屏中常用的一种展示数据动态变化的图表类型，随着时间若数据刷新，对应的数字效果也有动态刷新效果。

注：数据变化后图表才会变化，并非数据轮播刷新。

效果如下图所示：

1.2 功能介绍

• 支持数据动态刷新，数据更新时图表即更新。

• 支持调整图形和背景的样式。

• 支持自定义刷新间隔和图表联动。

1.3 插件安装

点击下载插件：扩展图表插件

设计器插件安装方法参照：设计器插件管理

服务器安装插件方法参照：服务器插件管理

2.1 准备数据

1）新建普通报表，新建数据集 ds1，如下图所示：

数据库查询语句为：

select case when 新销量=0 then '0' else 新销量 end as 新销量,产品,销售员 from (select ${int (RAND()*3)} as 新销量,产品,销售员 FROM 销量)b 

group by 产品,销售员 limit 1

注：由于数字 0 在粒子图展示时不显示，故用 case 转化为文本型。

2.2 插入图表

先合并一片单元格区域，点击上方工具栏插入图表按钮，插入「扩展图表-指标卡类>粒子计数器」。如下图所示：

2.3 数据设置

1）选中图表，点击右侧属性面板「单元格元素>数据」。

2）绑定数据集数据，数据集选择 ds1，标题为「销量」，计数值选择「新销量」。

• 标题：自定义设置，仅支持文本设置，不支持公式。

• 计数值：需要动态展示的数据。

注：计数值所选「字段」的值格式支持字符串，如：“10亿”。

2.4 样式设置

1）图形

图形设置项下可以设置粒子计数器的主题色，主题色分为两种，默认设置为「蓝色」和「紫色」。如下图所示：

2）背景

设置粒子计数器的背景色，如下图所示：

2.5 播放设置

播放设置项下可以设置数据刷新时间，默认且最小为 6 秒，如下图所示：

支持设置刷新联动事件，设置可参考文档：扩展图表轮播联动 。

2.6 效果预览

保存模板，选择「分页预览」，实现效果如中下图所示：

注：不支持移动端。

点击下载模板：粒子计数器.cpt

4.1 粒子计数器预览空白

问题描述

当模板中粒子计数器较多时，预览模板，随机出现图表显示空白的现象。

原因分析

可能是浏览器 WebGL 上下文丢失导致渲染失效。Chrome 浏览器默认 max active webgl contexts:16 。

解决方案

配置 Chrome 的启动参数，更改默认值 --args  --max-active-webgl-contexts=32（32 代表最多展示的 webgl context 的数量，可以根据需要修改） ，重启浏览器。

可通过浏览器打开 html 文件 test-max-active-webgl-context.zip 验证是否修改成功。