stylecomplib v1.2.980

组态样式组件库，基于 element-ui 2.13，

用法

安装(注意设置 registry 为公司的私有仓库)

npm i -S @gdcs/stylecomplib

在 main.ts 引入：

import StyleCompLib from "@gdcs/stylecomplib";
Vue.use(StyleCompLib);

按需加载

import {DBNumberInput,ColDBNumInput,TabController,GradientColorEditor,BoxShadow,ResourceManageBar,HyperlinkManageBar,InputUnitBar,CarouselPageController,FourNumInput} from "@gdcs/stylecomplib"; Vue.use(StyleCompLib)

组件内使用

事件

样式

#组态组件库使用方法

####介绍

• 页面有三个模块： 左边为 组件， 中间为 画板， 右边为 操作区。
• 画板有两种状态： 编辑 和 预览。编辑状态下能修改组件的样式、数据、交互，预览状态只能展示页面，不能进行编辑。
• 操作区有三个选项： 样式、数据、交互， 分别修改组件对应的功能。

将左边的组件拖动到中间的画板中，在编辑状态下，单击选中该组件，可以放大缩小、移动位置，也可以在右边界面的操作区上对该组件的样式、数据、交互等进行相应的编辑修改。 对于input选项框，修改之后，失去焦点就可以保存状态；对于下拉框、按钮等，点击修改即可保存。

####组件使用 #####组件的全局样式：

• 组件别名： 组件的别名；
• 图表尺寸： 组件的宽和高。 旁边的图标为填充按钮，点击选中时组件的宽高继承画板的宽高，即100%，同时禁止输入宽高，可再次点击进行取消填充；
• 图表位置： 组件所在的位置。组件距离画板最左边和最上边（即顶点）的位置距离；
• 内间距： 组件的边界距离 组件里的内容 的上下左右的距离。

文本组件

（1）、样式

#####字体属性

• 文字： 文本内容；
• 字号： 字体大小；
• 文本加粗：文本字体粗细；
• 描边大小：边缘的线条大小；
• 描边颜色： 边缘的线条的颜色；
• 描边X偏移： 边缘的线条距离文字的横向距离，正值往右，负值往左；
• 描边y偏移： 边缘的线条距离文字的纵向距离，正值往下，负值往上；
• 文本间距： 每个字之间的距离；
• 背景色： 文字的背景颜色；
• 文本行高：每一行文字的上下距离；

#####对齐方式

• 水平： 文字相对于组件宽度所在的位置；
• 垂直： 文字相对于组件高度所在的位置；
• 首行缩进：文本第一行相对组件左边边界缩进的位置；

图片组件

#####图片属性

• 背景色： 组件背景颜色；
• 背景图片： 点击上传图标打开资源管理器，在已上传的图片中选择一张图片，或者重新上传新图片。有背景图片时，显示图片，没有图片，显示背景色；
• 是否平铺：平铺是 一整张图片铺满组件，否则 图片如果小于组件的宽高，会重复显示直到占满整个组件；
• 圆角： 组件的四个圆角；
• 阴影组件： 点击开显示阴影组件，关为隐藏状态。
  • 类型： 内部阴影和外部阴影
  • 阴影位置：第一个输入框是X轴方向距离，第二个输入框是Y轴方向距离
  • 模糊距离： 阴影的发散距离 * 阴影大小：阴影大小
  • 颜色： 阴影颜色

开关组件

#####开关属性

• 图片模式： 是否开启图片模式；

#####未选中状态

• 文字： 未选中状态时显示的文字；
• 字号： 字体大小；
• 字体颜色：
• 按钮颜色：
• 背景颜色：
• 按钮图片：选择未选中状态时展现的图片，有图片则显示图片，没有图片显示背景颜色；

#####选中状态

• 文字： 选中状态时显示的文字；
• 字号： 字体大小；
• 字体颜色：
• 按钮颜色：
• 背景颜色：
• 按钮图片：选择 选中状态时展现的图片，有图片则显示图片，没有图片显示背景颜色；

按钮组件

#####容器属性

• 背景色： 组件的背景颜色；
• 阴影色： 组件的阴影部分颜色；
• 圆角： 组件的四个圆角；

#####字体属性

• 文字： 文字内容；
• 字号： 字体大小；
• 颜色： 字体颜色；

#####对齐方式

• 水平： 字体相对于组件的宽度所在的位置；
• 垂直： 字体相对于组件的高度所在的位置；

时间组件

#####时间属性

• 颜色： 字体颜色；
• 字号： 字体大小；
• 时间格式： 组件里显示的时间格式和输入框里输入的格式一样；

文档查看和网页嵌入组件

#####属性

• 背景色： 组件背景色；
• 上传文件： 可上传文档进行查看，只读模式；
• 链接地址： 输入网页地址，会展示该网页页面；

超链接组件

#####容器属性

• 背景色： 组件背景色；
• 边圆角： 组件的四个圆角大小；
• 图片： 点击上传图标打开资源管理器，在已上传的图片中选择一张图片，或者重新上传新图片。有背景图片时，显示图片，没有图片，显示背景色；

#####字体属性

• 文字： 文字内容；
• 字号： 字体大小；
• 颜色： 字体颜色；

#####超链接目标

• 地址： 输入网页地址，在预览模式下，点击该组件，会跳转到该地址链接页面；

边框组件

#####边框属性

• 默认样式： 系统返回的默认图片，可选择一张图片进行显示；
• 背景色： 组件背景色；
• 图片： 可上传新图片，如有图片，优先显示该图片，否则显示默认图片；

#####自定义样式

• 边框属性： 边框的属性，可对四边边框进行大小、颜色、类型、圆角进行编辑。打开开关，显示边框属性列表，关则隐藏；
  • 关联： 点击勾选关联，代表四个边框属性用同一边框样式，不勾选则代表四个边框样式分别设置；
  • 宽度：边框线的大小；
  • 类型：边框线的类型，有实线、虚线； * 颜色：边框线颜色；
  • 圆角：该圆角大小（分上、下、左、右四个圆角）；

图标组件

#####图标属性

• 颜色： 图标颜色；
• 圆角： 组件四个角的圆角；

#####描边

• 宽度： 边框线大小；
• 类型： 边框线类型，有实线、虚线、点线；
• 颜色： 边框线颜色；

表格组件

#####表头

• 是否显示： 是则显示表头，否则隐藏表头；
• 字体颜色：
• 字号： 字体大小；
• 字体粗细： 文本字体粗细；
• 背景色： 表头的背景色；
• 高： 表头的高度；

#####数据

• 是否滚动： 是为轮播表格，表格分页显示，滚动分页；
• 字体颜色：
• 字号： 字体大小；
• 数据数/页： 表格一页显示多少条数据；
• 动画时间： 表格滚动分页的动画反应时间；
• 奇偶行： * 开启： 开启奇偶行模式；
  • 奇数行颜色：设置奇数行的颜色；
  • 偶数行颜色：设置偶数行的颜色；

轮播组件

#####页面属性

• 自动播放： 勾选为轮播图一直自动循环播放， 不勾选则不会自动播放。在预览状态下，点击上一页或者下一页都可以播放；
• 关联轮播时间：
  • 单选按钮： 该单选按钮用来选中某一页的轮播页；
  • 轮播页名称：第一个输入框为轮播页名称，设置该轮播页的名称；

  • 轮播时间：第二个输入框为轮播时间；

    点击 + 按钮，可以增加轮播图页数，选中某一轮播页，可以在该轮播页中拖进新的组件（轮播组件为复合组件，轮播页中不可以再拖进复合组件），点击删除按钮可以删除选中的轮播页。 在预览状态下可以点击左右按钮进行翻页。

#####容器样式

• 背景色： 组件的背景颜色；
• 背景图： 点击上传图标打开资源管理器，在已上传的图片中选择一张图片，或者重新上传新图片。有背景图片时，显示图片，没有图片，显示背景色；

#####指示器样式

• 尺寸： 设置指示器的宽度和高度；
• 圆角：设置指示器的圆角大小；
• 背景色： 指示器的颜色；
• 选中背景色： 当前选中的指示器的颜色；

动态组件

双击可对动态组件进行编辑，在编辑状态下，点击右上角的图标按钮，图标高亮，显示组件状态页面，可在组态画板中拖入新的组件。点击某一行的状态，该状态画板就显示在最前面；点击右上角的退出按钮为关闭状态页面，点击退出编辑按钮关闭动态组件编辑状态。 组件状态页面

• 新建： 新建一页空白的状态；
• 复制：选中的某一状态，点击复制时，复制的是选中的状态页面的所有内容；
• 删除： 每一行的状态都有一个删除图标，点击该图标，删除当条状态；

实况天气组件

#####要素选择

• 多选复选框： 最多可选6个要素，选择的要素会在该组件中展示；

小时预报组件

#####小时预报选择

• 小时间隔： 选择间隔时间；
• 时间格式： 选择展示的年月日时分；
• 要素选择： 选择要素，展示在该组件中；

一周预报组件

#####一周天气

• 日期显示： 是否显示日期；
• 天气显示： 是否显示天气；
• 显示折线图： 是否显示折线图；

预警信息组件

#####预警样式

• 字体颜色：
• 背景颜色： 组件背景颜色；
• 自定义内容：

台风组件

#####基础样式

• 显示标题：是否显示标题
• 标题： 标题内容；
• 底图： 选择哪个地图作为底图（包括 天地图、高德地图、业务图、卫星图、地形图）；

#####地图样式

• 初始层级：缩放地图展示；

#####台风样式

• 更新时间（分钟）： 多少分钟更新一次台风信息；

红外云图组件

#####基础样式

• 显示标题：是否显示标题
• 标题： 标题内容；
• 底图： 选择哪个地图作为底图（包括 天地图、高德地图、业务图、卫星图、地形图）；

#####地图样式

• 初始层级：缩放地图展示；

#####云图样式

• 更新时间（分钟）： 多少分钟更新一次云图信息；
• 云图类型： 显示哪种类型的云图（包括 红外、水汽、可见光图）；

雷达图组件

#####基础样式

• 显示标题：是否显示标题
• 标题： 标题内容；
• 底图： 选择哪个地图作为底图（包括 天地图、高德地图、业务图、卫星图、地形图）；

#####地图样式

• 初始层级：缩放地图展示；

#####云图样式

• 更新时间（分钟）： 多少分钟更新一次雷达信息；

普通折线图组件

（1）、样式编辑 #####图例

• 显示状态： 是否显示状态
• 图例类型： 普通图例和滚动图例 （滚动图例在有很多图例列表时，在固定的宽高内显示时可以滚动展示）；
• 离左侧距离： 相对于组件的宽度来确定图例所在的位置（包括 左侧、居中、右侧）；
• 离上侧距离：相对于组件的高度来确定图例所在的位置（包括 上侧、居中、下侧）；
• 宽： 图例的宽度，设置为auto时，可以自适应；
• 高： 图例的高度，设置为auto时，可以自适应；
• 布局朝向： 图例相对于组件设置的方向，水平则由左至右，垂直则由上至下展示；
• 标记和文本的对齐： 图例中的每一项都包括文字和图标，图标就叫做标记，包括有默认、左对齐、右对齐
  • 默认： 图标在右，文字在左；
  • 左对齐： 图标在左，文字在右
  • 右对齐： 图标在右，文字在左；
• 内边距： 组件边框距离组件里内容的距离，点击中间的关联按钮，修改其中一个输入框的内容，其余三个也跟着改变，取消选择关联，则四个值分开设置；
• 每项间隔： 每一项之间的间隔距离；
• 标记的宽： 标记的宽度；
• 标记的高： 标记的高度；
• 图例文本： + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高； + 背景色： 字体背景色； + 边框色： 字体边框的颜色，当边框宽度至少为 1 时，才会显示边框； + 边框宽度： 边框线的宽度； + 圆角： 字体的四个圆角； + 背景阴影长度： 字体的背景阴影长度； + 背景阴影色： 背景的阴影颜色； + 背景阴影X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + 背景阴影Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上；

#####网格

• 显示状态： 是否显示网格；
• 离左侧距离： 网格距离组件左侧的距离，默认为10%；
• 离上侧距离：网格距离组件上侧的距离，默认为60px；
• 离右侧距离： 网格距离组件右侧的距离，默认为10%；
• 离下侧距离：网格距离组件下侧的距离，默认为60px；
• 刻度标签： 网格上的刻度是否显示；
• 阴影模糊大小： 网格阴影的发散距离；
• 阴影颜色： 网格的阴影颜色；
• 阴影X偏移： 网格阴影在 X 轴上的偏移距离， 正值往右，负值往左；
• 阴影Y偏移： 网格阴影在 Y 轴上的偏移距离， 正值往下，负值往上；

#####网格的提示组件设置

• 显示状态： 是否显示网格的提示组件；
• 触发类型： + 数据项图形触发： 主要在散点图，饼图等无类目轴的图表中使用； + 坐标轴触发： 主要在柱状图，折线图等会使用类目轴的图表中使用； + 不触发： 什么都不触发；
• 浮层位置： + 图形的内部中心： 鼠标所在图形的内部中心位置； + 图形上侧： 鼠标所在图形上侧（只在触发类型为 数据项图形触发 时有效）； + 图形左侧： 鼠标所在图形左侧（只在触发类型为 数据项图形触发 时有效）； + 图形右侧： 鼠标所在图形右侧（只在触发类型为 数据项图形触发 时有效）； + 图形底侧： 鼠标所在图形底侧（只在触发类型为 数据项图形触发 时有效）；
• 背景色： 提示组件的背景颜色；
• 内边距： 提示组件距离内容的距离，分上下左右，点击中间图标关联图标时，4个值同时修改，取消关联，4个值分别改变）；
• 提示框浮层的文本样式 + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高；

#####X轴

• 显示状态： 是否显示X轴；
• 索引位置： x 轴所在的网格的索引，默认位于第一个网格；
• 类型： 类目轴，适用于离散的类目数据。数值轴，适用于连续数据。时间轴。对数轴。
• X轴位置：在组件上侧或下侧；
• 名字： x轴的标题所在位置（包括开始、居中、末尾）；
• 名字位置： 坐标轴名称显示位置；
• 名字字体风格： + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高； + 背景阴影长度： 字体的背景阴影长度； + 背景阴影色： 背景的阴影颜色； + 背景阴影X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + 背景阴影Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上；
• 两边留白： 坐标轴两边留白策略，是否留白；
• 刻度标签（标题）： + 显示状态： 是否显示X轴的刻度标签； + 旋转角度： 字体的旋转角度； + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高； + 阴影色： 背景的阴影颜色； + 阴影长度： 字体的背景阴影长度； + X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上； + 宽度： 字体的宽度； + 高度： 字体的高度；
• 分隔线： + 显示状态： 是否显示分隔线；

#####X轴轴线相关设置

• 显示状态： 是否显示X轴轴线；
• 轴线样式： + 颜色： 轴线颜色； + 宽： 轴线宽度； + 类型： 轴线类型（实现、虚线、点线）； + 透明度： 轴线透明度；

#####X轴坐标轴刻度相关设置

• 显示状态： 是否显示X轴刻度；
• 刻度线和标签对齐： 对否对齐；
• 刻度线样式： + 颜色： 刻度线颜色； + 宽： 刻度线宽度； + 类型： 刻度线类型（实现、虚线、点线）；

#####X轴坐标轴指示器

• 显示状态： 是否显示；
• 类型： + 直线指示器： ； + 阴影指示器： ； + 无指示器： ；
• 指示器文本样式： + 文本显示： 是否显示文本； + 颜色： 字体颜色； + 字体大小： 字体的大小； + 背景色： 背景颜色； + 圆角： 指示器的四个圆角； + 内边距： 指示器距离其内容的距离；

#####Y轴

• 显示状态： 是否显示Y轴；
• 索引位置： Y 轴所在的网格的索引，默认位于第一个网格；
• 类型： 类目轴，适用于离散的类目数据。数值轴，适用于连续数据。时间轴。对数轴。
• Y轴位置：在组件上侧或下侧；
• 名字： Y轴的标题所在位置（包括开始、居中、末尾）；
• 名字位置： Y坐标轴名称显示位置；
• 名字样式设置： + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 内边距： 指示器距离其内容的距离； + 背景阴影长度： 字体的背景阴影长度； + 背景阴影色： 背景的阴影颜色； + 背景阴影X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + 背景阴影Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上；
• 两边留白： 坐标轴两边留白策略，是否留白；
• 刻度标签（标题）： + 显示状态： 是否显示X轴的刻度标签； + 旋转角度： 字体的旋转角度； + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高； + 阴影色： 背景的阴影颜色； + 阴影长度： 字体的背景阴影长度； + X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上； + 宽度： 字体的宽度； + 高度： 字体的高度；
• 分隔线： + 显示状态： 是否显示分隔线；

#####Y轴轴线相关设置

• 显示状态： 是否显示Y轴轴线；
• 轴线样式： + 颜色： 轴线颜色； + 宽： 轴线宽度； + 类型： 轴线类型（实现、虚线、点线）； + 透明度： 轴线透明度；

#####Y轴坐标轴刻度相关设置

• 显示状态： 是否显示Y轴刻度；
• 刻度线和标签对齐： 对否对齐；
• 刻度线样式： + 颜色： 刻度线颜色； + 宽： 刻度线宽度； + 类型： 刻度线类型（实现、虚线、点线）；

#####Y轴坐标轴指示器

• 显示状态： 是否显示；
• 类型： + 直线指示器： ； + 阴影指示器： ； + 无指示器： ；
• 指示器文本样式： + 文本显示： 是否显示文本； + 颜色： 字体颜色； + 字体大小： 字体的大小； + 背景色： 背景颜色； + 圆角： 指示器的四个圆角； + 内边距： 指示器距离其内容的距离；

#####提示框组件设置

• 显示状态： 是否显示；
• 触发类型： + 数据项图形触发： 主要在散点图，饼图等无类目轴的图表中使用； + 坐标轴触发： 主要在柱状图，折线图等会使用类目轴的图表中使用； + 不触发： 什么都不触发；
• 悬浮框： 是否显示悬浮框；
• 延时隐藏： 是否延时隐藏提示框组件；
• 触发条件： + 鼠标移动时触发； + 鼠标点击时触发 + 鼠标移动和点击时同时触发 + 鼠标移动和点击时都不触发
• 背景色： 背景颜色
• 内边距： 提示框组件距离其内容的距离；
• 文本样式

#####Y轴坐标轴指示器

• 类型： + 直线指示器： ； + 阴影指示器： ； + 无指示器： ；
• 指示器坐标轴： + X轴 + Y轴 + 半径 + 斜角
• 指示器文本样式： + 文本显示： 是否显示文本； + 颜色： 字体颜色； + 字体大小： 字体的大小； + 背景色： 背景颜色； + 圆角： 指示器的四个圆角； + 内边距： 指示器距离其内容的距离；
• 线条样式： + 颜色： 线条颜色； + 宽： 线宽度； + 类型： 线类型（实现、虚线、点线）； + 透明度： 线透明度；

（2）、数据编辑

• 数据源：
• 数据类型： + 静态数据 + API

缩放折线图组件

（1）、样式编辑 #####图例

• 显示状态： 是否显示状态
• 图例类型： 普通图例和滚动图例 （滚动图例在有很多图例列表时，在固定的宽高内显示时可以滚动展示）；
• 离左侧距离： 相对于组件的宽度来确定图例所在的位置（包括 左侧、居中、右侧）；
• 离上侧距离：相对于组件的高度来确定图例所在的位置（包括 上侧、居中、下侧）；
• 宽： 图例的宽度，设置为auto时，可以自适应；
• 高： 图例的高度，设置为auto时，可以自适应；
• 布局朝向： 图例相对于组件设置的方向，水平则由左至右，垂直则由上至下展示；
• 标记和文本的对齐： 图例中的每一项都包括文字和图标，图标就叫做标记，包括有默认、左对齐、右对齐
  • 默认： 图标在右，文字在左；
  • 左对齐： 图标在左，文字在右
  • 右对齐： 图标在右，文字在左；
• 内边距： 组件边框距离组件里内容的距离，点击中间的关联按钮，修改其中一个输入框的内容，其余三个也跟着改变，取消选择关联，则四个值分开设置；
• 每项间隔： 每一项之间的间隔距离；
• 标记的宽： 标记的宽度；
• 标记的高： 标记的高度；
• 图例文本： + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高； + 背景色： 字体背景色； + 边框色： 字体边框的颜色，当边框宽度至少为 1 时，才会显示边框； + 边框宽度： 边框线的宽度； + 圆角： 字体的四个圆角； + 背景阴影长度： 字体的背景阴影长度； + 背景阴影色： 背景的阴影颜色； + 背景阴影X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + 背景阴影Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上；

#####网格

• 显示状态： 是否显示网格；
• 离左侧距离： 网格距离组件左侧的距离，默认为10%；
• 离上侧距离：网格距离组件上侧的距离，默认为60px；
• 离右侧距离： 网格距离组件右侧的距离，默认为10%；
• 离下侧距离：网格距离组件下侧的距离，默认为60px；
• 刻度标签： 网格上的刻度是否显示；
• 阴影模糊大小： 网格阴影的发散距离；
• 阴影颜色： 网格的阴影颜色；
• 阴影X偏移： 网格阴影在 X 轴上的偏移距离， 正值往右，负值往左；
• 阴影Y偏移： 网格阴影在 Y 轴上的偏移距离， 正值往下，负值往上；

#####网格的提示组件设置

• 显示状态： 是否显示网格的提示组件；
• 触发类型： + 数据项图形触发： 主要在散点图，饼图等无类目轴的图表中使用； + 坐标轴触发： 主要在柱状图，折线图等会使用类目轴的图表中使用； + 不触发： 什么都不触发；
• 浮层位置： + 图形的内部中心： 鼠标所在图形的内部中心位置； + 图形上侧： 鼠标所在图形上侧（只在触发类型为 数据项图形触发 时有效）； + 图形左侧： 鼠标所在图形左侧（只在触发类型为 数据项图形触发 时有效）； + 图形右侧： 鼠标所在图形右侧（只在触发类型为 数据项图形触发 时有效）； + 图形底侧： 鼠标所在图形底侧（只在触发类型为 数据项图形触发 时有效）；
• 背景色： 提示组件的背景颜色；
• 内边距： 提示组件距离内容的距离，分上下左右，点击中间图标关联图标时，4个值同时修改，取消关联，4个值分别改变）；
• 提示框浮层的文本样式 + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高；

#####X轴

• 显示状态： 是否显示X轴；
• 索引位置： x 轴所在的网格的索引，默认位于第一个网格；
• 类型： 类目轴，适用于离散的类目数据。数值轴，适用于连续数据。时间轴。对数轴。
• X轴位置：在组件上侧或下侧；
• 名字： x轴的标题所在位置（包括开始、居中、末尾）；
• 名字位置： 坐标轴名称显示位置；
• 名字字体风格： + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高； + 背景阴影长度： 字体的背景阴影长度； + 背景阴影色： 背景的阴影颜色； + 背景阴影X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + 背景阴影Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上；
• 旋转角度：；
• 两边留白： 坐标轴两边留白策略，是否留白.例如 '20%'; '20%'/20; 20 数据最小值和最大值的延伸范围；
• 轴线相关设置 + 显示状态： 是否显示X轴轴线； + 颜色： 轴线颜色； + 宽： 轴线宽度； + 类型： 轴线类型（实现、虚线、点线）； + 透明度： 轴线透明度；

• 刻度相关设置 + 显示状态： 是否显示X轴刻度； + 刻度线和标签对齐： 对否对齐； + 刻度线颜色： 刻度线颜色； + 刻度线宽： 刻度线宽度； + 刻度线类型： 刻度线类型（实现、虚线、点线）；

• 刻度标签： + 显示状态： 是否显示X轴的刻度标签； + 旋转角度： 字体的旋转角度； + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 阴影色： 背景的阴影颜色； + 阴影长度： 字体的背景阴影长度； + X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上； + 宽度： 字体的宽度； + 高度： 字体的高度；

• 坐标轴指示器 + 显示状态： 是否显示； + 类型： + 直线指示器： ； + 阴影指示器： ； + 无指示器： ； + 文本显示： 是否显示文本； + 文本颜色： 字体颜色； + 字体大小： 字体的大小； + 背景色： 背景颜色； + 圆角： 指示器的四个圆角； + 内边距： 指示器距离其内容的距离；

• 分隔线： + 显示状态： 是否显示分隔线；

#####Y轴

• 显示状态： 是否显示X轴；
• 索引位置： Y 轴所在的网格的索引，默认位于第一个网格；
• 类型： 类目轴，适用于离散的类目数据。数值轴，适用于连续数据。时间轴。对数轴。
• Y轴位置：在组件上侧或下侧；
• 名字： Y轴的标题所在位置（包括开始、居中、末尾）；
• 名字位置： 坐标轴名称显示位置；
• 名字字体风格： + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 内边距： Y轴距离其内容的距离； + 背景阴影长度： 字体的背景阴影长度； + 背景阴影色： 背景的阴影颜色； + 背景阴影X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + 背景阴影Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上；
• 旋转角度：；
• 两边留白： 坐标轴两边留白策略，是否留白.例如 '20%'; '20%'/20; 20 数据最小值和最大值的延伸范围；
• 轴线相关设置 + 显示状态： 是否显示X轴轴线； + 颜色： 轴线颜色； + 宽： 轴线宽度； + 类型： 轴线类型（实现、虚线、点线）； + 透明度： 轴线透明度；

• 刻度相关设置 + 显示状态： 是否显示X轴刻度； + 刻度线和标签对齐： 对否对齐； + 刻度线颜色： 刻度线颜色； + 刻度线宽： 刻度线宽度； + 刻度线类型： 刻度线类型（实现、虚线、点线）；

• 刻度标签： + 显示状态： 是否显示X轴的刻度标签； + 旋转角度： 字体的旋转角度； + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 阴影色： 背景的阴影颜色； + 阴影长度： 字体的背景阴影长度； + X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上； + 宽度： 字体的宽度； + 高度： 字体的高度；

• 坐标轴指示器 + 显示状态： 是否显示； + 类型： + 直线指示器： ； + 阴影指示器： ； + 无指示器： ； + 文本显示： 是否显示文本； + 文本颜色： 字体颜色； + 字体大小： 字体的大小； + 背景色： 背景颜色； + 圆角： 指示器的四个圆角； + 内边距： 指示器距离其内容的距离；

• 分隔线： + 显示状态： 是否显示分隔线；

#####提示框

• 显示状态： 是否显示；
• 触发类型： + 数据项图形触发： 主要在散点图，饼图等无类目轴的图表中使用； + 坐标轴触发： 主要在柱状图，折线图等会使用类目轴的图表中使用； + 不触发： 什么都不触发；
• 坐标轴指示器 + 类型： + 直线指示器： ； + 阴影指示器： ； + 无指示器： ； + 指示器坐标轴： + X轴 + Y轴 + 半径 + 斜角 + 文本显示： 是否显示文本； + 颜色： 字体颜色； + 字体大小： 字体的大小； + 背景色： 背景颜色； + 圆角： 指示器的四个圆角； + 内边距： 指示器距离其内容的距离； + 线条颜色： 线条颜色； + 线条宽： 线宽度； + 线条类型： 线类型（实现、虚线、点线）； + 线条透明度： 线透明度； + 翻页动画： 是否开启；
• 悬浮框： 是否显示悬浮框；
• 延时隐藏： 是否延时隐藏提示框组件；
• 触发条件： + 鼠标移动时触发； + 鼠标点击时触发 + 鼠标移动和点击时同时触发 + 鼠标移动和点击时都不触发
• 背景色： 背景颜色
• 内边距： 提示框组件距离其内容的距离；
• 文本样式

#####内置型数据区域缩放

• 控制的X轴： 设置 dataZoom-inside（即中间部分展示数据的位置） 组件控制的 x轴；
• 控制的Y轴： 设置 dataZoom-inside（即中间部分展示数据的位置） 组件控制的 Y轴；
• 数据范围的开始位置: 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
• 数据范围的结束位置： 数据窗口范围的结束百分比。范围是：0 ~ 100。
• 布局方式: 布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，默认情况控制横向数轴还是纵向数轴；
• 锁定选择区域： 如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
• 停止组件功能

#####滑动条数据区域缩放

• 控制的X轴： 设置 dataZoom-inside（即中间部分展示数据的位置） 组件控制的 x轴；
• 控制的Y轴： 设置 dataZoom-inside（即中间部分展示数据的位置） 组件控制的 Y轴；
• 数据范围的开始位置: 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%；
• 数据范围的结束位置： 数据窗口范围的结束百分比。范围是：0 ~ 100；
• 布局方式: 布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，默认情况控制横向数轴还是纵向数轴；
• 锁定选择区域： 如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放；
• 显示组件: 是否显示；
• 背景色： 滑动条背景颜色；
• 手柄尺寸： 手柄大小；
• 手柄样式 + 颜色： 手柄颜色； + 边框颜色： ； + 边框类型： 边框线的类型（实现、虚线、点线）； + 阴影长度： 背景阴影长度； + 阴影色： 背景的阴影颜色； + X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上； + 透明度： 手柄的透明度， 取值 0~1；
• 文字样式： + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小；
• 离左侧距离： 组件离容器左侧的距离里；
• 离上侧距离： 组件离容器上侧的距离；

饼图组件

（1）、样式编辑 #####图例

• 显示状态： 是否显示状态
• 图例类型： 普通图例和滚动图例 （滚动图例在有很多图例列表时，在固定的宽高内显示时可以滚动展示）；
• 离左侧距离： 相对于组件的宽度来确定图例所在的位置（包括 左侧、居中、右侧）；
• 离上侧距离：相对于组件的高度来确定图例所在的位置（包括 上侧、居中、下侧）；
• 宽： 图例的宽度，设置为auto时，可以自适应；
• 高： 图例的高度，设置为auto时，可以自适应；
• 布局朝向： 图例相对于组件设置的方向，水平则由左至右，垂直则由上至下展示；
• 标记和文本的对齐： 图例中的每一项都包括文字和图标，图标就叫做标记，包括有默认、左对齐、右对齐
  • 默认： 图标在右，文字在左；
  • 左对齐： 图标在左，文字在右
  • 右对齐： 图标在右，文字在左；
• 内边距： 组件边框距离组件里内容的距离，点击中间的关联按钮，修改其中一个输入框的内容，其余三个也跟着改变，取消选择关联，则四个值分开设置；
• 每项间隔： 每一项之间的间隔距离；
• 标记的宽： 标记的宽度；
• 标记的高： 标记的高度；
• 图例文本： + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高； + 背景色： 字体背景色； + 边框色： 字体边框的颜色，当边框宽度至少为 1 时，才会显示边框； + 边框宽度： 边框线的宽度； + 圆角： 字体的四个圆角； + 背景阴影长度： 字体的背景阴影长度； + 背景阴影色： 背景的阴影颜色； + 背景阴影X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + 背景阴影Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上；

#####网格

• 显示状态： 是否显示网格；
• 离左侧距离： 网格距离组件左侧的距离，默认为10%；
• 离上侧距离：网格距离组件上侧的距离，默认为60px；
• 离右侧距离： 网格距离组件右侧的距离，默认为10%；
• 离下侧距离：网格距离组件下侧的距离，默认为60px；

#####提示组件设置

• 显示状态： 是否显示网格的提示组件；
• 触发类型： + 数据项图形触发： 主要在散点图，饼图等无类目轴的图表中使用； + 坐标轴触发： 主要在柱状图，折线图等会使用类目轴的图表中使用； + 不触发： 什么都不触发；
• 触发条件： + 鼠标移动时触发； + 鼠标点击时触发 + 鼠标移动和点击时同时触发 + 鼠标移动和点击时都不触发
• 背景色： 提示组件的背景颜色；
• 内边距： 提示组件距离内容的距离，分上下左右，点击中间图标关联图标时，4个值同时修改，取消关联，4个值分别改变）；
• 提示框浮层的文本样式 + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 行高： 字体的行高；

#####饼图设置

• 系列名称： 饼图的系列名称（鼠标放置饼图上时会有显示）；
• 选中模式：是否支持多个；
• 扇区是否顺时针：；
• 起始角度：以圆心为原点的直角坐标系的起始角度；
• 展示南丁格尔图： 是否展示南丁格尔图；
• 离左侧距离：饼图距离组件左侧的距离；
• 离上侧距离： 饼图距离组件上侧的距离；
• 文本标签： + 是否显示： 是否显示文本标签； + 标签位置： 标签所在的位置（饼图扇区外侧，饼图扇区内部，饼图中心位置）； + 标签旋转： ； + 颜色： 字体颜色； + 字体风格： 字体风格（默认、斜体、倾斜）； + 字体粗细： 文本字体粗细； + 字体系列： 字体有很多系列，如黑体、宋体等； + 字体大小： 字体的大小； + 内边距： 文本的边框距内容的距离； + 背景色： 字体背景颜色 + 阴影色： 背景的阴影颜色； + 阴影长度： 字体的背景阴影长度； + X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上； + 标签对齐方式： （仅当标签位置在饼图扇区外侧时有效） + 外部对齐 + 标签线的末端对齐 + 文字对齐 + 默认
• 视觉引导线： + 是否显示： 是否显示视觉引导线； + 线类型： 视觉引导线类型（实线，点线，虚线）； + 线透明度： 视觉引导线透明度；
• 高亮的扇区和标签样式： + 标签显示： 是否显示视觉引导线； + 字体粗细： 文本字体粗细； + 字体大小： 字体的大小； + 引导线显示： 字体的大小； + 图形阴影色： 图形的阴影颜色； + 图形阴影模糊大小： 图形阴影的模糊大小； + 图形X偏移： 背景阴影在 X 轴上的偏移距离， 正值往右，负值往左； + 图形Y偏移：背景阴影在 Y 轴上的偏移距离， 正值往下，负值往上；

水位图组件

标题：

• 标题文字： 标题文字内容；
• 文本样式； + 颜色： 字体颜色； + 字体粗细： 文本字体粗细； + 字号： 字体的大小；
• 垂直对齐； + 左对齐 + 居中对齐 + 右对齐

系列列表：

• 波浪动画： 是否开启波浪动画；
• 数据： ；
• 外圈： ； + 轮廓距离： 外圈距离内圈的距离； + 边框颜色： 外圈的边框颜色； + 边框宽度： 外圈的边框宽度；
• 波浪样式： + 透明度： 波浪的透明度； + 阴影范围： 波浪的阴影程度；
• 背景颜色： 背景的颜色；
• 提示框： + 展示： 是否展示； + 颜色： 提示框颜色； + 内颜色： 提示框内颜色； + 字号： 字体大小； + 粗细： 文本字体粗细； + 对齐方式： 提示框相对于内圈的所在位置；