在Web程序应用中，经常会有编辑文章等需求。为了文章的排版布局如word文档编辑器一样美观方便，如：加粗、下划线、左右对齐等等，以使文字信息能够更形象更美观的传达给阅读者，同时也提高信息发布的工作效率。在这个需求的背景下，HTML在线编辑器就应运而生了。
1、导入JS库

您可以访问xhEditor官方网站下载最新版本的xhEditor编辑器，xhEditor官方网站地址为：http://xheditor.com/，打开右上角的免费下载 | 代码向导链接，即可找到最新版本的下载地址。xhEditor无需任何安装，无需任何设置，直接解压缩并拷贝到你的网站相应文件夹下面即可直接调用。
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="js/xheditor_langzh-cn.js"></script>
注：jQuery和xhEditor的js文件路径请根据你网站具体路径情况相应修改
2、HTML实现可视化的文本框textarea

<form id="frmDemo" method="post" action="">
<span style="white-space:pre">	</span><textarea id="elm1" name="elm1" style="width: 860px; height: 180px; display: none;">Hello xhEditor!</textarea>
</form>
在需要实现可视化的文本框textarea属性中添加：

 class="xheditor {skin:'default'}"

注：前面主参数也可以是xheditor-mfull、xheditor-mini或xheditor-simple，分别加载多行完全、迷你和简单工具栏。后面大括号用来定义更多的初始化参数，可以省略。

3、xhEditor的调用
通过js调用xheditor插件
<script>
$('#elm1').xheditor();
$('#elm1').xheditor({
	tools:'full',
	skin:'default',
	showBlocktag:true,
	internalScript:false,
	internalStyle:false,
	width:300,
	height:200,
	loadCSS:'http://xheditor.com/test.css',
	fullscreen:true,
	sourceMode:true,
	forcePtag:true,
	upImgUrl:"upload.php",
	upImgExt:"jpg,jpeg,gif,png"
	});
</script>
xhEditor提供两种方式初始化编辑器：
方法1：利用class属性来初始化和传递各种初始化参数，例：
 class="xheditor {skin:'default'}"
方法2：利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数，例：
$('#elm1').xheditor(); 
或者 
$('#elm1').xheditor({tools:'mini'});
特别说明：两种初始化方法只能选择其中一种使用，如果两种方法的代码同时存在页面中，方法2的代码不会有任何效果。
我们更倾向于推荐大家使用方法1，因为更简单易用，不涉及任何的Javascript代码。通过简单的参数设置即可定制各种效果的编辑器界面，简单易用且功能强大。
如果想实现更加复杂的交互应用，或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问，那么你可以选择使用方法2，相对具有更大的自由空间。
xhEditor也提供了即时的卸载编辑器方法：

$('#elm1').xheditor(false);


4、初始化的参数列表



tools：自定义工具按钮
参数值：full(完全),mfull(多行完全),simple(简单),mini(迷你) 
或者自定义字符串，例如：'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About' 
 
完整按钮表： 
|：分隔符 
/：强制换行 
Cut：剪切 
Copy：复制 
Paste：粘贴 
Pastetext：文本粘贴 
Blocktag：段落标签 
Fontface：字体 
FontSize：字体大小 
Bold：粗体 
Italic：斜体 
Underline：下划线 
Strikethrough：中划线 
FontColor：字体颜色 
BackColor：字体背景色 
SelectAll：全选 
Removeformat：删除文字格式 
Align：对齐 
List：列表 
Outdent：减少缩进 
Indent：增加缩进 
Link：超链接 
Unlink：删除链接 
Img：图片 
Flash：Flash动画 
Media：Windows media player视频 
Emot：表情 
Table：表格 
Source：切换源代码模式 
Preview：预览当前代码 
Print：打印 
Fullscreen：切换全屏模式 
About：关于xhEditor


skin：皮肤风格选择
参数值：default(默认风格),o2007blue(Office2007蓝色),o2007silver(Office2007银色),vista(Vista),nostyle(NoStyle)


layerShadow：阴影的深度(按钮面板和模式窗口的背景阴影)
参数值：0(不显示阴影),大于0的数值(显示阴影并设置阴影的深度)


clickCancelDialog：点击任意位置取消按钮面板功能
参数值：默认true(开启点击取消功能),false(关闭点击取消功能，必需要点击“取消”按钮才能关闭按钮面板)


showBlocktag：显示段落标签
参数值：true(显示段落标签),false(不显示)


linkTag：样式链接link标签保留状态
参数值：true(保留样式链接link标签),false(清理样式链接link标签)


internalScript：内部JS代码保留状态
参数值：true(保留内部JS代码),false(清理内部JS代码)


inlineScript：内联JS代码保留状态
参数值：true(保留内联JS代码),false(清理内联JS代码)


internalStyle：内部样式保留状态
参数值：true(保留内部样式),false(清理内部样式)


inlineStyle：内联样式保留状态
参数值：true(保留内联样式),false(清理内联样式)


width：编辑器宽度
参数值：不带单位的数字，例：300


height：编辑器高度
参数值：不带单位的数字，例：100


loadCSS：加载样式
参数值：URL地址、URL数组以及直接内部样式，例如：'1.css'、['1.css','2.css']、'<style>body{font-size:20px;}</style>'<br />备注：1.0.0 RC3新添加加载内部样式功能


fullscreen：默认全屏显示
参数值：true(全屏大小),false(标准大小)


sourceMode：默认源代码模式
参数值：true(源代码模式),false(编辑模式)


forcePtag：强制P标签
参数值：true(强制使用P标签),false(不强制),默认true


forcePasteText：强制将粘贴的内容转换为文本
参数值：true(强制转文本),false(不转文本),默认false 
备注：v1.1.0新添加


disableContextmenu：禁用编辑区的右键菜单
参数值：true(禁用右键菜单),false(不禁用),默认false 
备注：v1.1.0新添加


editorRoot：编辑器JS文件所在的根路径
参数值：编辑器所在的根路径，用在某些特殊情况下定位编辑器的根路径，默认为空，读取默认的编辑器根路径 
备注：v1.1.0新添加


shortcuts：自定义键盘快捷方式
参数：快捷键对应事件代码的对象数组 
示例：{'ctrl+enter':function(){$('#frmTest').submit();}} 
备注：1.0.0 beta2新添加


urlBase：相对URL地址的基地址
参数：字符串的URL地址，用以解决前后台不在同一路径的资源定位问题 
备注：1.1.0新添加


urlType：本地URL地址强制转换方式选择
参数：abs(绝对路径),root(根路径),rel(相对路径) 
备注：1.0.0 beta2新添加,v1.1.0版中名字由localUrl变更为urlType


emotPath：修改表情图片的URL根路径
参数：字符串的URL地址，默认为空，指向编辑器路径下的默认表情 
备注：1.1.0新添加


emotMark：是否在表情img标签上标注emot属性
参数：true(标注),false(不标注),默认为false 
说明：若使用了ubb插件，请设置此属性为true 
备注：1.0.0 beta2新添加


emots：添加自定义表情
参数：可定义多个JSON对象数组，示例如下：{qq:{name:'QQ',count:55,width:25,height:25,line:11},msn:{name:'MSN',count:40,width:22,height:22,line:8}} 
        name：表情分组名 
        count：表情数量 
        list：表情列表，例：{test1:'表情1',test2:'表情2'}，键名代表文件名，扩展名必需为gif，键值代表alt信息 
        width：单个表情区域宽度，必需大于或等于表情最大宽度 
        height：单表情区域高度，必需大于或等于表情最大高度 
        line：单行显示表情数量 
        说明：count和list必需选其中一个值，注意count模式插入表情img的alt为空 
备注：1.0.0 beta2新添加


wordDeepClean：Word文档深入清理选项
参数：true(深入清理),false(不深入清理，保留style样式效果),默认为true 
说明：若网站应用需要保留更多的Word样式效果，请设置此值为false，不过产生的HTML代码体积会大大增大 
备注：1.0.0 beta2新添加


hoverExecDelay：悬停自动执行延迟的时间
参数：数值(单位毫秒)，默认为100，设置为-1关闭此功能 
备注：1.0.0 rc2新添加


defLinkText：超链接的默认文字
参数值：字符串(默认值：“点击打开链接”) 
说明：只在不选择任何内容的情况下才会用到这个参数值


modalWidth：showModal弹出窗口的默认宽度
参数值：数值，默认为350 
说明：弹出窗口的默认宽度


modalHeight：showModal弹出窗口的默认高度
参数值：数值，默认为220 
说明：弹出窗口的默认高度


modalTitle：showModal弹出窗口是否显示上方的标题栏
参数值：true(显示),false(不显示) 
说明：控制弹出窗口是否显示上方的标题栏，默认为显示，若需要显示一个更定制个性化的iframe窗口，可通过此参数隐藏上方的标题栏


upBtnText：上传按钮的文字
参数值：任意字符串,默认值：“上传” 
备注：1.0.0 beta2新添加


html5Upload：是否开启HTML5上传支持
参数值：true(允许),false(不允许),默认为true允许 
说明：本功能需要浏览器支持HTML5上传 
备注：1.0.0Final新添加


upMultiple：允许一次上传多少个文件
参数值：大于0的数值,默认：99,设置为1关闭多文件上传 
说明：本功能需要浏览器支持HTML5上传 
备注：1.0.0 RC3新添加


upLinkUrl：超链接文件上传接收URL
参数值：接收用户上传的服务器端程序URL，默认留空为禁用超链接上传功能，具体使用方法请参考demo8演示文件 
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php


upLinkExt：超链接上传前限制本地文件扩展名
参数值：超链接上传前限制的文件扩展名列表，默认为：zip,rar,txt，建议与服务端扩展名检查列表一致


upImgUrl：图片文件上传接收URL
参数值：接收用户上传的服务器端程序URL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件 
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php


upImgExt：图片上传前限制本地文件扩展名
参数值：图片上传前限制的文件扩展名列表，默认为：jpg,jpeg,gif,png，建议与服务端扩展名检查列表一致


upFlashUrl：动画文件上传接收URL
参数值：接收用户上传的服务器端程序URL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件 
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php


upFlashExt：动画上传前限制本地文件扩展名
参数值：动画上传前限制的文件扩展名列表，默认为：swf，建议与服务端扩展名检查列表一致


upMediaUrl：视频文件上传接收URL
参数值：接收用户上传的服务器端程序URL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件 
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php


upMediaExt：视频上传前限制本地文件扩展名
参数值：视频上传前限制的文件扩展名列表，默认为：avi，建议与服务端扩展名检查列表一致


onUpload：文件上传成功回调函数
参数值：成功后需要执行的函数 
说明：这个函数执行时返回的值为上传程序返回的msg变量，可能为字符串或者数组，若为字符串则直接代表url，若是数组，则必需包含一个url的变量，其它可由可开发者自定义 
备注：1.0.0 beta2新添加


plugins：自定义按钮之插件扩展
插件对象的属性解释： 
c：样式表名称 
t：插件名字(鼠标在按钮上方时显示) 
s：快捷方式，例："ctrl+enter" 
h：是否鼠标悬停直接执行,1:直接执行(省略当前值代表不直接执行) 
e：按钮点击后需要执行的代码(省略执行代码，则把当前的插件名作为参数，调用浏览器的execCommand函数) 
 
特别说明： 
如果您希望样式表存储在系统自带的模板目录ui.css中，请将插件对象的样式名留空，则会自动按照插件名来调用相应的样式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名 
 
具体调用方法请参考演示文件夹中的demo9
5、API函数接口列表


API接口示例代码：

var editor=$('#elm1').xheditor({tools:'full',skin:'default'}); 
editor.focus(); 
editor.setSource('str') 
sHtml=editor.getSource() 
editor.appendHTML('<p>aaa</p>') 
editor.pasteHTML('<p>aaa</p>') 
editor.pasteText('str') 
sHtml=editor.formatXHTML('<b>aaa</b>') 
editor.toggleSource() 
editor.toggleFullscreen() 
alert(editor.settings.upImgExt); 
editor.settings.upImgExt='txt,doc';

API接口列表：


focus：使编辑器获得焦点
无参数


setSource：设置编辑器源代码
参数1：要设置的源代码内容，例：'<p>aaa</p>'


getSource：返回编辑器格式后的源代码
无参数


appendHTML：粘贴HTML内容到编辑器结尾处
参数1：要粘贴的HTML代码，例：'<p>uuu</p>' 
注：0.9.5版添加


getSelect：返回当前选中的内容
参数1：返回格式，可选'text'返回文本格式，其它所有值都返回HTML格式


pasteHTML：粘贴HTML内容到编辑器当前光标处
参数1：要粘贴的HTML代码，例：'<p>uuu</p>' 
参数2：是否覆盖粘贴，留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)


pasteText：粘贴文本到编辑器当前光标处
参数1：要粘贴的文本，例：'这里的内容完全原样显示<strong>aaa</strong>' 
参数2：是否覆盖粘贴，留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)


formatXHTML：格式化XHTML代码
参数1：需要格式化的HTML代码，例：'<b>aaa</b>'，返回'<strong>aaa</strong>' 
参数2：是否代码缩进换行,true(执行缩进格式化),false(不执行缩进格式化),默认为false


toggleSource：在源代码模式和编辑模式之间切换
参数1：空(切换),true(显示源代码模式),false(显示编辑模式)


toggleFullscreen：在全屏模式和标准大小之间切换
参数1：空(切换),true(显示全屏模式),false(显示标准模式)


toggleShowBlocktag：切换块标签显示状态
参数1：空(切换),true(切换为显示块标签),false(切换为不显示块标签)


addShortcuts：添加快捷键
参数1：快捷键值，例：'ctrl+enter' 
参数2：用户按下快捷键后需要响应的程序代码，例：function(){$('#frmTest').submit();} 
说明：允许为某个相同快捷键值重复添加多个响应代码 
备注：1.0.0 beta2新添加


delShortcuts：删除快捷键
参数1：快捷键值，例：'ctrl+enter' 
 
备注：1.0.0Final新添加


exec：立即执行按钮及插件
参数1：工具按钮名称(不区分大小写)，例：Link、img 
说明：此函数可以在插件内部或者外部Javascript代码中进行调用


showModal：显示模式窗口
参数1：模式窗口的标题title 
参数2：模式窗口的内容content 
参数3：模式窗口的宽度w 
参数4：模式窗口的高度h 
参数5：模式窗口关闭时的回调函数onRemove


showIframeModal：显示iframe式的模式窗口
参数1：模式窗口的标题 
参数2：iframe的地址ifmurl，可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}xheditor_plugins/test.html 
参数3：提供给目标iframe页面回调用的回调函数，可以在iframe页面中以这样的形式调用：callback('1.gif'); 
参数4：模式窗口的宽度w 
参数5：模式窗口的高度h 
参数6：模式窗口关闭时的回调函数onRemove


settings：获取或者修改编辑器内部参数
internalScript:是否清除内部代码 
inlineScript:是否清除内联代码 
internalStyle:是否清除内部样式 
inlineStyle:是否清除内联样式 
forcePtag:强制使用P标签 
upLinkUrl:超链接上传接口地址 
upLinkExt:超链接本地上传扩展限制 
upImgUrl:图片上传接口地址 
upImgExt:图片本地上传扩展限制 
upFlashUrl:动画上传接口地址 
upFlashExt:动画本地上传扩展限制 
upMediaUrl:视频上传接口地址 
upMediaExt:视频本地上传扩展限制 
beforeSetSource:在设置源代码到编辑器前调用此函数 
beforeGetSource:从编辑器返回源代码前调用此函数 
focus:编辑器获得焦点时回调此函数 
blur:编辑器失去焦点时回调此函数 
 
注：修改有效变量仅限以上，其它的变量都仅在编辑器初始化时使用
6、案例完整代码

以上就是xhEditor可视化编辑器的基本用法，下面我附上整篇完整的代码，有需要的随意拿走

官网案例演示http://xheditor.com/demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xhEditor</title>
</head>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="js/xheditor_langzh-cn.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui.css" />
<body>
<form id="frmDemo" method="post" action="">
<textarea id="elm1" name="elm1" style="width: 860px; height: 180px; display: none;">Hello xhEditor!</textarea>
</form>
<script>
$('#elm1').xheditor();
$('#elm1').xheditor({
	tools:'full',
	skin:'default',
	showBlocktag:true,
	internalScript:false,
	internalStyle:false,
	width:300,
	height:200,
	loadCSS:'http://xheditor.com/test.css',
	fullscreen:true,
	sourceMode:true,
	forcePtag:true,
	upImgUrl:"upload.php",
	upImgExt:"jpg,jpeg,gif,png"
	});
</script>
</body>
</html>

文章目录
文字水平居中和垂直居中
如何设置a标签不带下划线
控件右对齐
div上下居中
控件左右居中
控件展示在同一行
设置文字超出部分...显示


CSS 样式笔记

文字水平居中和垂直居中

水平居中：在该文字的div设置：text-align: center;
垂直居中：在该文字的div设置：line-height: 60px; 其中60px为该div的高度

如何设置a标签不带下划线
a {
  text-decoration: none;
}

控件右对齐
float: right;

div上下居中
height: 50px;
line-height: 50px

设置line-height的值和div的高一致
控件左右居中
margin: 0 auto;

控件展示在同一行
display: inline-block

设置文字超出部分…显示
多行文本
p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
}

单行文本
div1{
   overflow: hidden;    
 	text-overflow: ellipsis;    //超出部分以省略号显示
 	white-space: nowrap;
 	width: 20em;    //用px单位亦可行
 }

记得即时保存正在制作的报表! ! !
1. 报表设计器功能区简介
数据连接: 获取数据库数据 → 数据集: 添加数据表(数据库, Excel等) → 我的报表(新建 - 配置) → 预览报表
2. 报表元素组
2.0 连接数据
① Excel文件直接导入, 如果连接的是数据库数据则需要先进行数据连接(测试连接 → 保存)

② 为字段选择合适的模型(维度/度量)






2.1 创建报表





2.2 数据源管理
在进行数据绑定前必须先选择数据源! ! !




2.3 数据






维度=X轴 度量=Y轴

多个维度时以最下面一个为X轴
2.4 标题


标题可配置项：

标题高度

标题名称

标题颜色

标题尺寸（字体大小）

对齐方式（左对齐、居中、右对齐）

字体加粗、倾斜、下划线

背景颜色

背景圆角

上下左右边距（相对于标题边的高度、宽度）
2.5 选择项


可配置项：

【选择区】

是否 开启 选择项

高度

【文本】

颜色

尺寸（字体大小）

对齐（左对齐、居中、右对齐）

风格（字体加粗、倾斜、下划线）

【背景】

背景颜色

圆角（数字越大越圆）

【边框】

尺寸（边框线粗细）

颜色

【边距】

上下左右边距（相对于标题边的高度、宽度）

-- 【排序SQL表达式】对选择项内容自定义排序
case 机构名称  
    when '红海公司' then 1
    when '黄海公司' then 2
    when '蓝海公司' then 3
    when '紫海公司' then 4
    else -1
end;

-- 推荐使用desc倒序，好处是当有未知字段时，会排到最下面
case 机构名称
    when '红海公司' then 1
    when '黄海公司' then 2
    when '蓝海公司' then 3
    when '紫海公司' then 4
    else -1
end
desc;

-- 多个选择项排序
case 机构名称
    when '红海公司' then 1
    when '黄海公司' then 2
    when '蓝海公司' then 3
    when '紫海公司' then 4
    else -1
end
desc;

case 年份
    when '2018' then 1
    when '2019' then 2
    else -1
end
desc;

2.6 基本
多用于背景色、内边距（相对当图表边）、外边距（相对当图表边）的调整


2.7 边框
调整边框线的粗线、颜色


2.8 联动
联动是2个以上图表组件，有相同的维度名称时，切换其中一个图的维度，另一个（或多个图表）维度也自动对应切换



不联动配置：联动配置的是被其它组件联动


2.9 轴线
例如，下面线图的轴线高度、颜色、文字旋转、字体大小（以及是否自动换行）、分割线颜色


2.10 图形
是否开启图例，以图便摆放位置，颜色、大小、边距

提示窗：文字、背景的调整

每个图的图形会有所不同，常见都有图例、提示窗、以及因图形不同特有一些配置项


2.11 指标
例如柱线图，配置为左轴为柱，显示销售流水，右轴为线，显示折扣情况，以百分数显示
要制作柱图、线图时，推荐使用柱线图。因为柱线图有左轴、右轴（柱图、线图没右轴），同时柱线图还可以随时快速调整当柱图，或线图
2.12 过滤
可以使用：=等于、<>不等于、>大于、>=大于等于、<小于、<=小于等于、And和、or并


2.13 排序


小技巧：对于制作像售罄率的图，切换季度维度，X轴起始月份也会变化，就要用到ID正序

例如：Q1是从01月、02月、03月……12月（共12个连续月）

Q2是04月、05月、06月……12月、01月、02月、03月（12个连续月）
-- SQL表达式对月倒序
CASE 月份
	WHEN '十二月' THEN 12
	WHEN '十一月' THEN 11
	WHEN '十月' THEN 10
	WHEN '九月' THEN 9
	WHEN '八月' THEN 8
	WHEN '七月' THEN 7
	WHEN '六月' THEN 6
	WHEN '五月' THEN 5
	WHEN '四月' THEN 4
	WHEN '三月' THEN 3
	WHEN '二月' THEN 2
	WHEN '一月' THEN 1
	ELSE -1 
END
DESC;
2.14 表配置
表格宽度100%，锁定列1（像EXCEL一样冻结1列），维度列数为1列
制作双行表头，2个以上列配置–>合并分组 填写一样的名称，将自动合并成一组
列宽：相对于当前页面，值越大 越宽值类型：选择 百分数，该列显示 百分数千分位：例如12345元  千分位后为 12,345元；即从个位起每3位一个逗号“，”分隔
动态标题：使用 {{}} 引用数据源中的维度值



表格组件可以不配置度量，增加维度列数，变表格组件为列表或清单

表格维度一列为http://****.jpg 或.png 图片URL地址，可用于制作如：TOP排行榜等图
2.15 列配置
列宽

合并分组

值类型：百分数

小数位：小数点后几位

千分位：每三位一个,号（例如：10000 显示为10,000）
2.16 函数
可对度量数据进行函数加工展示，目前支持求和、平均值、计数、最大值、最小值等函数


可对维度默认值进行设定（例如：默认显示某一项目或某一月份数据等）



也可默认第一个或最后一个维度默认值：first()或者last()


2.17 预警
通过值的范围自定义颜色，符号样式大小等配置，起到一定的警示效果

值范围左边为空，表示-∞，反之右边为空，∞；{{度量}}可引用其他数值
2.18 浮动
例如使用图标铵钮组件，制作一个浮动的翻页接钮，当报表使用微信打开查看时就很实用
【浮动】是否开启浮动

【对齐】自适应、靠左、靠右、靠上、靠下

【尺寸】浮动组件的大小，按像素 或者 网格 2选1

【位置】相对于对齐方式，向上（顶部）、下（底部）、左、右移动的位置
两个浮动组件效果，制作的上下翻页

也可制作返回首页、浮动页眉、浮动选择器（例如：让用户方便地选择【直营】【加盟】）、浮动维度查询搜索等
2.19 提示窗
2.20 标记线
配置报表水印



var today = new moment().format("YYYY-MM-DD"); //获得当前日期
VSUtils.watermark({message: username+"<br/>"+today}); //水印内容：当前用户名+当前日期

3. 图表组件
仪表盘(ECharts控件)
【仪表板】默认最小值：0，最大值：100，可自定义仪表板最小最大值
【值域】值百分比0.4红色，是指 -25至25区间（50个单位*0.4=20）即：红色显从 -25 ~ -5（20个单位）都显示红色



图形常用的有：

【分段数量】下图分10段显示，即仪盘板上-25、-20、-15、-10……共10个刻度【刻度线宽度】下图中仪表盘红、黄、绿线的宽度

【分割线宽度和长度】下图中刻度-20、-15、-10 边上的"-"，即刻度线的粗细【值尺寸】下图中 值 -10% 数字的大小


单值图(基础控件)
地图组件(ECharts控件)
可细分为"中国地图-面积预警"和"中国地图-地区指向"

通过地图组件可显示23个省、4个直辖市、5个自治区、2个特别行政区相应的数值

但需要对每个区域与省份进行映射，如下图所示



映射后相应省份的值为多个地区之和，如上图中广东显示数值为广州及深圳两个地区之和
可配置项值域范围，如下图所示：


日历过滤器
轴线图-线、柱、面积(ECharts控件)
轴线图组件除了集成柱图、线图功能，可从柱图、线图之间切换外，还有左轴、右轴之分，可以变化成多柱、多线、柱线混合图、柱线堆积图
百度地图(地图控件)
自定义脚本控件
自定义选择过滤器
表格

1.背景图片设置：background:url("img.jpg")
2.div水平居中：margin：0px(上下),auto（左右自动对齐）
3.图片和文字水平居中 img 添加属性align="absmiddle"(绝对居中)
4.字体加粗：font-weight:bold
5.  <a>标签去下划线 text-decoration:none;添加下划线：text-decoration:underline
6. <a>标签鼠标放上去变色  a:hover{}
7.<a>标签使用浮动后，继承父类的样式
8.空隙的兼容问题，可用float解决
9.首行缩进 text-indent:10px;
10.内敛块级元素的父元素随着子元素的增加而增加 display：inline-block
11.图片不重复显示 no-repeat
12.背景图可以同时插入多张，逗号隔开，同1。background:url("img.jpg") no-repeat ,background:url("img2.jpg") no-repeat right top(right top防止两张图片重叠)
13.css文件中设置background:url(路径)  路径会默认在css文件夹中
14.定时器设置 var id=setInterval("function(){}",time),clearInterval(id),id从1开始。setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。