[]
        
在线Demo 免费试用
(Showing Draft Content)

ECharts仪表盘

功能概述

仪表盘就像汽车的速度表一样,有一个圆形的表盘及相应的刻度,指针指向当前数值,直观的表现某个指标的进度或实际情况。

ECharts 仪表盘插件与内置的仪表盘组件不同,它可以通过开放的自定义属性定制出更丰富的视觉效果,下图是部分示例:

image image

image


示例文件包:可下载后直接导入系统参考查看。

wyn-export-20230712144518.zip

添加 ECharts 仪表盘

单击可视化插件按钮展开插件列表,然后在 ECharts 插件中将仪表盘插件拖拽至编辑区,即可添加一个 ECharts 仪表盘。

image

基本属性设置

在编辑区右侧选择属性设置或者双击该图表,打开属性设置面板可进行图表外观属性的设置。

image

绝大部分的属性设置项目与内置图表一致,请参考单个组件外观与属性设置。本文中主要举例介绍不同的属性设置项。

图表样式

image

仪表板样式:批量设置样式,支持四种内置样式。

显示指针:是否显示仪表盘指针。显示后还可以设置指针颜色。

图像不透明度:设置整体的不透明度。

自定义属性:使用 JS 代码进行深度定制。详见本页最下方。

数值轴

数值轴属性中包含了仪表盘数值轴,也就是对表盘的细节设置。如修改表盘的最大最小值、设置表盘轴线的宽度,颜色以及网格线等。

image

最小值:设置表盘的最小值。

最大值:设置表盘的最大值。

轴线颜色:表盘轴的底色。

轴线宽度:表盘轴的粗细。

进度条颜色:表盘上表示实际数据进度条的颜色。

显示圆角:开启后表盘轴以及进度条两端都会显示为圆角效果。

显示网格线:是否显示分隔线,如下图。

image

网格线颜色:设置网格线的颜色和透明度。

分割数:把表盘刻度分成几组显示。

显示刻度标记:是否显示刻度线。显示后可以进一步设置刻度线的位置和颜色。

image

显示刻度标签:是否显示刻度标签。显示后可进一步设置刻度标签的数据单位、格式和字体。

image

数据绑定

添加图表后,数据绑定面板会自动打开,在数据绑定面板中选择数据集或数据模型

将需要的字段拖拽至数据绑定区域,完成数据绑定。

image

数据绑定区域

说明

实际值

仪表盘指针指示的值,可绑定一个字段或不绑定字段。

对比值

指针数值的目标值或对比值,可绑定一个字段或不绑定字段。

数据处理

将数据绑定到组件后,可以对字段和数据进行进一步配置处理,使其更符合使用场景的需要。

比如修改数据显示格式、字段重命名、级联显示效果。

或者进行数据的聚合运算(合计、平均数、最大值、最小值、计数)、快速运算(排名运算、占比运算、累计运算、移动运算、以及基于日期的同环比运算等)。

具体操作请详见数据处理

image2022-1-14_15-55-31.png

image

数据探索与分析

组件支持非常丰富的数据探索分析能力,可为您的数据可视化分析过程提供强有力的支撑。

比如聚焦组件,为组件添加批注、过滤器、排序排名、格式化预警、参考线、趋势分析等等。具体介绍,请见数据探索与分析

image