组态样式组件库,基于 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 轴上的偏移距离, 正值往下,负值往上;
水位图组件
标题:
- 标题文字: 标题文字内容;
- 文本样式;
- 颜色: 字体颜色;
- 字体粗细: 文本字体粗细;
- 字号: 字体的大小;
- 垂直对齐;
- 左对齐
- 居中对齐
- 右对齐
系列列表:
- 波浪动画: 是否开启波浪动画;
- 数据: ;
- 外圈: ;
- 轮廓距离: 外圈距离内圈的距离;
- 边框颜色: 外圈的边框颜色;
- 边框宽度: 外圈的边框宽度;
- 波浪样式:
- 透明度: 波浪的透明度;
- 阴影范围: 波浪的阴影程度;
- 背景颜色: 背景的颜色;
- 提示框:
- 展示: 是否展示;
- 颜色: 提示框颜色;
- 内颜色: 提示框内颜色;
- 字号: 字体大小;
- 粗细: 文本字体粗细;
- 对齐方式: 提示框相对于内圈的所在位置;