跳到主要内容

颜色块

1、添加组件​

点击“”图标，再点击“文本类 ->颜色块”，即可完成颜色块添加，如图3.10；

图3.10

2、样式设置​

（1）精度​

选中该组件，在操作界面右侧的“精度”处修改，可设置数值保留的小数位数，设置好后，点击预览可以看到效果

（2）行数​

选中该颜色块组件，在操作界面右侧的“行数”处可把数字设置成整体的样式，如图3.10.1；

图3.10.1

（4）边框设置​

选中该组件，在操作界面右侧的“边框设置”处修改，设置好后，点击预览可以看到效果，如图3.10.2；

  • x/y间距：样色块之间的横向和纵向的间距，调整间距值，颜色块至今的间距会变化；
  • 边框：可设置边框样式；分为：无边框、内置图片、内置边框；
  • 无边框：设置无边框的颜色块，样式如图3.10.5；
  • 内置图片：设置颜色块的背景，如可设置图片地址、背景图片、背景颜色，样式如图3.10.3；
  • 内置边框：设置颜色块的边框样式，如可设置边框颜色、边框宽度、背景颜色，样式如图3.10.4；

图3.10.2

（5）内部设置​

选中该组件，在操作界面右侧的“内部设置”处可修改文字样式，如图3.10.6；

  • 字体样式：颜色块内文字的样式；
  • 字体大小：颜色块内文字的大小；
  • 字体颜色：颜色块内文字颜色；
  • 字体粗细：颜色块内文字粗细；
  • 对齐方式：颜色块内文字对齐方式；
  • 边距：颜色块内文字之间边距；

图3.10.6

（6）前缀设置​

选中该组件，在操作界面右侧的“前缀设置”处可设置前缀样式，如图3.10.7；

  • 间距：前缀x方向的间距；
  • 颜色：前缀字体颜色；
  • 字体大小：前缀字体大小；

图3.10.7

（7）后缀设置​

选中该组件，在操作界面右侧的“前缀设置”处可设置前缀样式，如图3.10.8；

  • 前缀内容：前缀要显示的内容；
  • 对齐方式：前缀的对齐方式；
  • X间距：前缀跟X轴的间距；
  • Y间距：前缀跟Y轴间距；
  • 颜色：前缀字体颜色；
  • 字体大小：前缀字体大小；

图3.10.8

3、数据格式​

数据格式示例​

[
    {
        "backgroundColor": "#67C23A",
        "prefixText": "朝阳总销售额",
        "value": "12345",
        "suffixText": "亿"
    },
    {
        "backgroundColor": "#409EFF",
        "prefixText": "昌平总销售额",
        "value": "12345",
        "suffixText": "亿"
    },
    {
        "backgroundColor": "#E6A23C",
        "prefixText": "海淀总销售额",
        "value": "12345",
        "suffixText": "亿"
    },
    {
        "backgroundColor": "#F56C6C",
        "prefixText": "西城总销售额",
        "value": "12345",
        "suffixText": "亿"
    }
]