图2 矩形装饰配置界面 参考模板：系统默认提供四种可选模板，单击即可切换样式。 背景颜色：背景颜色设置，包括是否显示背景颜色、单一色或者渐变色配置。 阴影设置：支持设置为内部阴影、外部阴影或者自定义阴影。 边框设置：为组件边框设置粗细、颜色、类型、圆角。 父主题： 设置AstroZero高级页面预置组件属性

查看更多 →

技术架构选型上，通常会选择比较成熟的开源组件或商业软件。 图1 常见的web应用通用架构 Web前端：基于HTML/HTML5/Vue/ CSS 3开发web前端页面。展现层和数据层完全分离，通过跨域实现前后端数据通信 小程序：基于微信、支付宝平台，开发H5的小程序，增加用户操作体验和访问便捷性服务层

查看更多 →

见性。 图4 设置定位 文本：设置文本的字号、字体、行高、字重、颜色、对齐方式、风格及修饰。 图5 设置文本 背景：设置组件背景，背景图、渐变类型、颜色及裁剪方式。 图6 设置背景 边框：设置边框的位置、颜色、位置宽度以及是否为圆角。 图7 设置边框 效果：设置组件的透明度、轮廓样式及光标样式。

查看更多 →

图进行多种配置。 图3 基本柱图效果图 参考配色模板：系统默认提供两种可选柱图模板，单击即可切换样式。 默认：按照数据进行排序展示。 蓝色渐变不排序。 可选择某一模板重置，也可通过设置各配置项得到想要的效果。 数据系列：对每个数据系列（柱状条颜色、柱状条宽度、柱条边框圆角、数值显

查看更多 →

。 标记的图形：散点或者气泡标记的图形。 标记的大小：散点标记的大小。气泡图没有该参数且不支持改标记大小。 颜色设置：支持纯色、线性渐变和径向渐变。 阴影设置：设置阴影的颜色、大小、水平方向偏移距离和垂直方向偏移距离。气泡图有该参数，散点图没有。 图形透明度：区间是[0,1]，0代表不显示，1代表全部显示。

查看更多 →

。 标记的图形：散点或者气泡标记的图形。 标记的大小：散点标记的大小。气泡图没有该参数且不支持改标记大小。 颜色设置：支持纯色、线性渐变和径向渐变。 阴影设置：设置阴影的颜色、大小、水平方向偏移距离和垂直方向偏移距离。气泡图有该参数，散点图没有。 图形透明度：区间是[0,1]，0代表不显示，1代表全部显示。

查看更多 →

默认：按照数据进行排序展示。 蓝色渐变不排序。 可选择某一模板重置，也可通过设置各配置项得到想要的效果。 数据系列：对每个数据系列（柱状条颜色、柱状条宽度、柱条边框圆角、数值显示）进行一系列配置。单击“+”，可添加数据系列。如何设置数据系列，请参见设置数据系列。 通用柱状图颜色：选项为“单色”或“渐变色”，选择颜色可改变柱状条的颜色。

查看更多 →

下边距：图表到组件边框底部的距离。 左边距：图表到组件边框左侧的距离。 参考模板：系统预置的水平堆叠柱图模板，如垂直模板、垂直堆叠模板、蓝色渐变不排序等。 图表背景：图表的背景颜色。 颜色设置：设置图表背景颜色。 圆角：图表背景是否为圆角。 圆角半径：四边圆角时的圆角半径（取值为“0”时为直角，“100”为圆角）。

查看更多 →

系列 配色方案：支持默认色、经典、舒适、智能、数据、艺术、SaaS规范的配色方案。 图9 配色方案 系列：支持对系列颜色的配置（纯色和渐变色）。 渐变色可设置起点、终点颜色，起点终点颜色也可互换。 图10 系列颜色配置 效果图 图11 水平柱状图示例 父主题： 柱状图

查看更多 →

组件类型 组件 图表 饼图：通过饼图的形式，将数据信息清晰的展示在页面上。包括实心圆饼图、轮播饼图、满月饼图、基本饼图、贪吃蛇饼图、玫瑰花饼图和渐变色饼图。 线状图：通过折线变换的形式，对数据进行展现，可直观展示数据的变化趋势。包括区域图、多区域折线图、基本折线图和多折线图。 水位图：

查看更多 →

系列 配色方案：支持默认色、经典、舒适、智能、数据、艺术、SaaS规范的配色方案。 图7 配色方案 系列：支持对系列颜色的配置（纯色和渐变色）。 渐变色可设置起点、终点颜色，起点终点颜色也可互换。 图8 系列颜色配置 效果图 图9 台阶图例 父主题： 线状图

查看更多 →

显示名称：自定义图表中系列的显示名称。 标记图形：设置标记的图形样式，如圆形、矩形、三角形等。 标记大小：设置标记的大小。 颜色设置：设置标记颜色样式，支持纯色、线性渐变和径向渐变。 颜色：设置标记的颜色。 边框颜色：设置标记边框颜色。 图形透明度：散点图散点的透明度，取值0~1。 数据标签：显示散点对应的数值标签。

查看更多 →

显示名称：自定义图表中系列的显示名称。 标记图形：设置标记的图形样式，如圆形、矩形、三角形等。 颜色设置：设置标记颜色样式，支持纯色、线性渐变和径向渐变。 颜色：设置标记的颜色。 边框颜色：设置标记边框颜色。 阴影颜色：设置标记阴影颜色。 阴影大小：设置标记阴影大小。 水平方向偏移距离：气泡图中气泡在水平方向上的偏移位置。

查看更多 →

显示名称：自定义图表中系列的显示名称。 标记图形：设置标记的图形样式，如圆形、矩形、三角形等。 颜色设置：设置标记颜色样式，支持纯色、线性渐变和径向渐变。 颜色：设置标记的颜色。 边框颜色：设置标记边框颜色。 阴影颜色：设置标记阴影颜色。 阴影大小：设置标记阴影大小。 水平方向偏移距离：气泡图中气泡在水平方向上的偏移位置。

查看更多 →

显示名称：自定义图表中系列的显示名称。 标记图形：设置标记的图形样式，如圆形、矩形、三角形等。 标记大小：设置标记的大小。 颜色设置：设置标记颜色样式，支持纯色、线性渐变和径向渐变。 颜色：设置标记的颜色。 边框颜色：设置标记边框颜色。 图形透明度：散点图散点的透明度，取值0~1。 数据标签：显示散点对应的数值标签。

查看更多 →

波浪上时文本颜色：当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。 数据 在数据中，设置水位图组件的数据来源，更多介绍请参见数据接入 交互 在交互中，配置水位图与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。

查看更多 →

波浪上时文本颜色：当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。 数据 在数据中，设置箭头水位图组件的数据来源，更多介绍请参见数据接入。 交互 在交互中，配置箭头水位图与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。

查看更多 →

波浪上时文本颜色：当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。 数据 在数据中，设置圆角矩形水位图组件的数据来源，更多介绍请参见数据接入 交互 在交互中，配置圆角矩形水位图与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。

查看更多 →

波浪上时文本颜色：当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。 数据 在数据中，设置水位图组件的数据来源，更多介绍请参见数据接入 交互 在交互中，配置水位图与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。

查看更多 →

波浪上时文本颜色：当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。 数据 在数据中，设置圆角矩形水位图组件的数据来源，更多介绍请参见数据接入 交互 在交互中，配置圆角矩形水位图与其他组件或页面之间的交互能力。更多交互介绍，请参见交互设置。

查看更多 →

显示名称：自定义图表中系列的显示名称。 折线类型：设置图形中折线类型，包括平滑和不平滑。 折线宽度：设置图形中折线的宽度。 折线颜色：设置折线颜色，支持单色和渐变色。如果开启了阈值线，渐变会随着阈值线值变化。 折线不透明度：设置折线的不同透明度。 拐点尺寸：设置拐点尺寸。 拐点颜色：设置拐点显示的颜色。 拐点不透明度：设置拐点不透明度。

查看更多 →