JS regular and plug Echart
First, regular
1, the definition of
a), defined explicitly: understand at a glance
-
var variable name = new RegExp ( "regular expression pattern");
2), implicitly defined: common, simple. Not so obvious, you may not see a
note: the beginning and end must be a slash "/", and does not require the use of double quotation marks
-
var variable name = / regular expression pattern /;
example:
var myregex = new RegExp("[0-9]");
var myregex = /[0-9]/;
<Script type = "text / JavaScript">
// display definition
var reg = new RegExp ( "[ 0-9]"); // matching the numbers in square brackets, equivalent to \ D
REG = new new the RegExp ( "\ \ d "); // a display definition, using some special characters need to be escaped
// implicitly defined
var reg2 = / \ d {6 } /; // matching 6 numbers
// get the character source
var a = "123456a123456";
// match: test () returns true / false, exec () returns an array of strings
Alert (reg.test (A))
Alert (reg2.test (A));
the console.log (REG2. Exec (A));
</ Script>
2, method
. 1), Test
(. 1) action: matches the regular expression pattern.
Return: true / false, true: matching, false: Mismatch
2), match
(. 1) action: Regular expression matching can be retrieved within a specified string value, or to find one or more.
3）、exec()
Returns an array of strings
3, modifier
1), a modifier
i performs case-insensitive matching.
g perform a global match (find all matches rather than stopping after the first match).
2), the use of
(1) new RegExp ( "regexp ", " modifier")
(2) / regexp / modifier
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>正则基本用法</title>
</head>
<body>
<script type="text/javascript">
/*显式定义*/
// [0-9]:表示匹配数字
var reg = new RegExp("[0-9]");
/*隐式定义*/
// \d:表示匹配数字
var reg2 = /\d/;
var reg3 = /[0-9]/;
var reg = /[a-zA-Z0-9]/;
// test()：判断是否满足正则表达式 是返回true，不是返回false
var str = "143wertyui";
console.log(reg.test(str));
console.log(reg2.test(str));
console.log(reg3.test(str));
console.log("===================方法=================");
var reg01 = /a/;
var str2 = "b";
var str3 = "xscbvbbsdragw";
/*test()*/
console.log(reg01.test(str2));
console.log(reg01.test(str3));
/*match()*/
console.log(str2.match(reg01));
console.log(str3.match(reg01));
// 字符串match字符串
console.log(str3.match(str2));
/*exec()*/
console.log(reg01.exec(str2));
console.log(reg01.exec(str3));
console.log("===================修饰符=================");
// i:不区分大小写匹配 g:全局匹配，从第一位开始匹配到最后一位（不加这个修饰符，匹配一个就停止了）
var reg02 = /a/;
var reg03 = /a/i;
var reg04 = new RegExp("a");
var reg05 = new RegExp("a","i");
var reg06 = /a/g;
var reg07 = new RegExp("a","g");
var reg08 = /a/ig;
var reg09 = new RegExp("a","gi");
var str4 = "b";
var str5 = "xscbSKDANDAaavbbsdragw";
var str6 = "ASaDFUGfaDHFJKGADSDAL";
console.log(reg02.test(str6));
console.log(reg03.test(str6));
console.log(reg04.test(str6));
console.log(reg05.test(str6));
console.log("======");
console.log(str5.match(reg02));
console.log(str5.match(reg06));
console.log(str6.match(reg08));
console.log(str6.match(reg09));
</script>
</body>
</html>
4, form validation
to verify the user name, age
requirements:
a user name at least eight
characters long, must begin with a letter, a letter or number at the end, there can be - and _.
Between the ages of 1 to 99
^: What begins with
$: To what end
[A-zA-Z]: may contain letters (case insensitive)
[0-9]: matching digits
i: case-insensitive
{N, m}: match at least n times, matching up m times
*: Zero or more times matches the preceding character or sub-expression. For example, zo *
matches "z" and "zoo". * Equivalent to {0}.+: One or more times to match the preceding character or sub-expression. For example, "zo +" and "zo" and "zoo" match, but does not match the "z". +
Is equivalent to {1}.?: Zero or one matches the preceding character or sub-expression.
(): Grouping
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<!--用户名至少需要 8-12个字符，必须以字母开头，以字母或数字结尾，可以有-和_。
年龄在 1~99 之间-->
<body>
<form id="form" action="">
<table>
<tr>
<td>姓名<span id="namespan"></span></td>
</tr>
<tr>
<td>
<input type="text" id="name" name="name" onblur="valName()" />
</td>
</tr>
<tr>
<td>年龄<span id="agespan"></span></td>
</tr>
<tr>
<td>
<input type="text" id="age" name="age" onblur="valAge()" />
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
//表单验证
function valName(){
// ^：匹配输入符的开始位置
// $：匹配输入符的结尾位置
// ()：标记一个子表达式的开始和结束的位置
// +：匹配前面的子表达式一次或者多次
// ?：匹配前面的子表达式零次或一次
// *: 匹配前面的子表达式零次或多次
var pattern =/^[a-z][a-z0-9-_]{6,10}[a-z0-9]$/i;
var str1=document.getElementById("name").value;
if(str1.length>=8){
if(pattern.test(str1)){
//alert("OK");
document.getElementById("namespan").innerHTML="";
return true;
}else{
document.getElementById("namespan").innerHTML="<span style='color:red'>至少需要 8 个字符，必须以字母开头，以字母或数字结尾，可以有-和_</span>";
return false;
}
}
}
function valAge() {
var age = document.getElementById('age').value;
// {n,m}： n 和 m 均为正整数， 其中 n<=m， 最少匹配 n 次且最多匹配 m 次
var reg = /^[1-9][0-9]?$/g;
if(!reg.test(age)){
document.getElementById('agespan').innerHTML='<span style="color:red">年龄要在 1~99 之间</span>';
return false;
}else {
document.getElementById('agespan').innerHTML='';
return true;
}
}
</script>
</html>
Two, ECharts ,
A visual library with open source JavaScript implementation, the PC can run smoothly
on mobile devices and is compatible with most of the current browsers (IE8 / 9/10/11 , Chrome, Firefox, Safari , etc.), the underlying rely lightweight vector graphics library [ZRender] {.} underline , intuitive, interactive rich, highly customization data visualization graphs.
ECharts
provide a general [line graph] {. Underline} , [Histogram] {. Underline} , [scattergram] {. Underline} , [pie] {. Underline} , [FIG line K] {. Underline } , for statistics [boxplots] {.} underline , for geographic data visualization [map] {.} underline , [thermodynamic FIG] {.} underline , [diagram] {.} underline , for relationship data visualization [diagram] {. underline} , [TreeMap] {. underline} , [sun FIG] {. underline} , multidimensional data visualization [parallel coordinates] {. underline} , as well as for
the BI [funnel FIG] {.} underline , [dashboard] {.} underline , and supports between mashup FIG Fig.
In addition to the chart contains a wealth of features already built-in, ECharts also provides [Custom Series] {.} Underline , only need to pass a renderItem function, can be mapped to data from any graphic you want, better yet and these have also been used in conjunction with interactive components without having to worry about other things.
1. Histogram
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts报表</title>
<!-- 1、引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 2、为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script type="text/javascript">
/*3、通过 echarts.init 方法初始化一个 echarts 实例*/
// 基于准备好的dom，初始化echarts实例
var mycharts = echarts.init(document.getElementById("main"));
/*并通过 setOption 方法生成图*/
// 指定图表的配置项和数据
var option = {
color: ['pink'], // 柱状的颜色
// 提示框组件
tooltip : {
show:true, // 是否显示提示框组件，包括提示框浮层和 axisPointer。默认是true
trigger: 'axis', // 触发类型 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// X坐标轴
xAxis : [
{
type : 'category', // category：类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
// X轴显示的数据
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 刻度
axisTick: {
alignWithLabel: true
}
}
],
// Y坐标轴
yAxis : [
{
type : 'value' // 'value' 数值轴，适用于连续数据。
}
],
// 系列列表。每个系列通过 type 决定自己的图表类型
series : [
{
name:'直接访问', // 系列名
type:'bar', // 柱状图
barWidth: '60%', // 柱状宽度
data:[10, 52, 200, 334, 390, 330, 220] // 具体数据
}
]
};
// 将配置项设置到echarts实例中
mycharts.setOption(option);
</script>
</html>
2. pie chart
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts报表</title>
<!-- 1、引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 2、为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
/*3、通过 echarts.init 方法初始化一个 echarts 实例*/
// 基于准备好的dom，初始化echarts实例
var mycharts = echarts.init(document.getElementById("main"));
/*并通过 setOption 方法生成图*/
// 指定图表的配置项和数据
var option = {
// 报表的标题
title : {
text: '某站点用户访问来源', // 正标题
subtext: '纯属虚构', // 副标题
x:'right' // 标题的对齐方式 center、left、right
},
// 组件提示框
tooltip : {
trigger: 'item', // 触发类型,'item':数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
// 提示框字符内容格式器 {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
legend: {
// 图例的布局朝向 horizontal：水平方向；vertical：竖直方向
orient: 'vertical',
// 图例组件离容器左侧的距离 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
left: 'left',
// 图例的数据数组
data: [{
name: '直接访问',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}
,'邮件营销','联盟广告','视频广告','搜索引擎']
},
// 系列列表
series : [
{
name: '访问来源', // 系列名称
type: 'pie', // 图标类型
radius : '55%', // 半径
center: ['50%', '60%'], // 中心点的位置
// 数据
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
// 每个选项的样式
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 将配置项设置到echarts实例中
mycharts.setOption(option);
</script>
</html>
3. AJax + Echarts
Test data.json the name, age, and attributes, to form the corresponding histograms, pie charts.
Import data.json
{
"resultCode":1,
"message":"success",
"result":[
{
"userId":1,
"userName":"张三",
"userPwd":"123456",
"userAge":18,
"userSex":true,
"userHead":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3443176063,4021563566&fm=27&gp=0.jpg"
},
{
"userId":2,
"userName":"李四",
"userPwd":"123123",
"userAge":19,
"userSex":false,
"userHead":"http://userimg.yingyonghui.com/head/77/1500654783808/2706577.png-thumb"
},
{
"userId":3,
"userName":"王五",
"userPwd":"123456",
"userAge":20,
"userSex":true,
"userHead":"http://img.mp.itc.cn/upload/20170305/7aefc624437a44f69be70a93c40f8976_th.jpeg"
},
{
"userId":4,
"userName":"赵六",
"userPwd":"123321",
"userAge":21,
"userSex":true,
"userHead":"http://pic34.photophoto.cn/20150130/0005018338514993_b.jpg"
}
]
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJax+Echarts</title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript" src="js/echarts.min.js" ></script>
</head>
<body>
<button onclick="loadBar()">显示柱状图</button>
<button onclick="loadPie()">显示饼状图</button>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main1" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
/**
* ajax访问数据，加载柱状图
*/
function loadBar() {
// 发送ajax请求，获取数据
$.ajax({
type:"get",
url:"js/data.json",
success:function(result) {
var nameArr = []; // 数据名
var dataArr = []; // 数据值
// 获取返回的数据中的result名称对应的数组
var resultList = result.result;
// 遍历数组，得到每个对象的用户名和年龄
for (var i = 0; i < resultList.length; i++) {
nameArr.push(resultList[i].userName);
dataArr.push(resultList[i].userAge);
}
// 基于准备好的dom，初始化echarts实例
var mycharts = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : nameArr,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '30%',
data:dataArr
}
]
};
// 将配置项设置到echarts实例中
mycharts.setOption(option);
}
});
}
/**
* ajax访问数据，加载饼状图
*/
function loadPie() {
// 发送ajax请求获取数据
$.ajax({
type:"get",
url:"js/data.json",
success:function(result){
var nameArr = [];
var dataArr = [];
// 获取返回的数据中的result名称对应的数组
var resultList = result.result;
// 遍历数组，得到每个对象的用户名和年龄
for (var i = 0; i < resultList.length; i++) {
nameArr.push(resultList[i].userName);
var obj = {};
obj.value = resultList[i].userAge;
obj.name = resultList[i].userName;
dataArr.push(obj);
}
// 基于准备好的dom，初始化echarts实例
var mycharts = echarts.init(document.getElementById("main1"));
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: nameArr
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:dataArr,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 将配置项设置到echarts实例中
mycharts.setOption(option);
}
});
}
</script>
</html>
4. Aajx access interface
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aajx访问接口</title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
</head>
<body>
</body>
<script type="text/javascript">
/*添加操作*/
/*$.ajax({
type:"get",
url:"http://localhost:8080/xiaowangcai/account",
data:{
actionName:"addAccount",
accountName:"Lisa",
accountType:"招行",
money:10000,
remark:"本月零花钱"
},
success:function(result){
console.log(result);
}
})*/
/*查询操作*/
$.ajax({
type:"get",
url:"http://localhost:8080/xiaowangcai/account",
data:{
actionName:"queryAccountByUserId"
},
success:function(result){
console.log(result);
}
})
</script>
</html>
Reproduced in: https: //www.jianshu.com/p/fff7ff3ac74b