软件
产品
mouseenter && mouseleave 不会触发冒泡
防止冒泡 e.stopPropagation()
第一步：导入
第二步：创建容器
第三步配置参数，并调用
//DOM挂载完毕
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
legend: {},
tooltip: {},
dataset: {
dimensions: ["product", "2015", "2016", "2017", "2018", "2019"],
source: [
{
product: "6-2",
"2015": 43.3,
"2016": 85.8,
"2017": 93.7,
"2018": 85.8,
"2019": 85.8
},
{
product: "6-3",
"2015": 43.3,
"2016": 85.8,
"2017": 93.7,
"2018": 85.8,
"2019": 85.8
},
{
product: "6-4",
"2015": 114,
"2016": 65.2,
"2017": 82.5,
"2018": 85.8,
"2019": 85.8
},
{
product: "6-5",
"2015": 72.4,
"2016": 53.9,
"2017": 39.1,
"2018": 85.8,
"2019": 85.8
},
{
product: "6-6",
"2015": 72.4,
"2016": 53.9,
"2017": 39.1,
"2018": 85.8,
"2019": 85.8
}
]
},
xAxis: { type: "category" },
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{ type: "bar" },
{ type: "bar" },
{ type: "bar" },
{ type: "bar" },
{ type: "bar" }
]
});
}
}
<script src="__STATIC__/zgjr/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="__STATIC__/zgjr/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript" src="__STATIC__/js/core/jquery.min.js"></script>
<script type="text/javascript">
layui.use(['layer', 'form', 'miniTab', 'echarts','element'], function () {
var $ = layui.jquery,
form = layui.form,
layer = layui.layer,
miniTab = layui.miniTab,
element = layui.element,
echarts = layui.echarts;
miniTab.listen();
/**
* 报表功能
*/
var myChart = echarts.init(document.getElementById('echarts-records'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
//color:"blue",
grid: { y: 50, y2: 70, x2: 20, x: 45 },
title: {
text: '各省订阅份数分布图'
},
tooltip: {},
legend: {
data: ['中国金融', '金融博览']
},
xAxis: {
data: [],
axisLabel: {
interval: 0,
rotate: 40,
axisLabel: {
fontSize: 10
}
}
},
yAxis: {},
series: [{
name: '份数',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('return.php').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: ['北京市', '天津市', '河北省', '山西省', '内蒙古', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏', '陕西省', '甘肃省', '青海省', '宁夏', '新疆', '大连市', '宁波市', '青岛市', '深圳市',]
},
series: [{
name: '中国金融',
type: 'bar',
data: [174, 511, 6069, 2682, 1732, 766, 2451, 3639, 250, 12839, 3278, 2728, 3203, 2053, 3307, 9857, 4797, 2905, 4496, 3435, 311, 3668, 5979, 1080, 4114, 45, 2857, 3265, 144, 448, 826, 128, 451, 912, 30,]
},
{
name: '金融博览',
type: 'bar',
data: [91, 211, 5835, 2564, 1167, 452, 1776, 1523, 250, 3045, 1639, 1582, 1952, 1822, 1067, 2324, 2218, 1646, 2685, 857, 218, 1534, 3309, 433, 2131, , 1379, 1851, 45, 396, 357, 66, 249, 422, 1,],
},]
});
});
})
</script>
1.导入cdn
2.使用
2.1在jq中使用
$(function () {
$("body > div.bannerbox > div.pox.flex > p:nth-child(1)").addClass("animate__animated animate__zoomInDown").css({
"animation-duration": "2000ms"
})
})
//也可以直接作为类添加
$(".fhdb").on("click",function(){
$('html ,body').animate({scrollTop: 0}, 400);
})
($('.register_content_item').eq(i).hasClass(className))
$(".footer1_right_scroll ul").empty()
mouseover // 不会触发父级
mouseleave // 不会触发父级
```js
//禁止滚动条滚动
function unScroll() {
var top = ( d o c u m e n t ) . s c r o l l T o p ( ) ; (document).scrollTop(); (document).scrollTop(); (document).on(‘scroll.unable’, function (e) {
KaTeX parse error: Expected 'EOF', got '}' at position 36: …(top); }̲) } //移…(document).unbind(“scroll.unable”);
}
### mob 静止滚动
```js
var mo = function (e) { e.preventDefault(); };
function unScroll() {
// console.log("页面禁止滚动出发了")
document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", mo, { passive: false });//禁止页面滑动
}
/***取消滑动限制***/
function removeUnScroll() {
// console.log("页面取消了禁止滚动出发了")
document.body.style.overflow = '';//出现滚动条
document.removeEventListener("touchmove", mo, { passive: false });
}
//默认首页
$(".headerLeft>.listitem").eq(0) //导航栏
.addClass("active")
.siblings().removeClass("active")
$('.navlist .navitem').eq(0).show(); //默认导航栏对应的下方内容显示，隐藏
$('.navlist .navitem').eq(0).siblings().hide();
//带有鼠标滑动效果的导航栏
$(function () {
//导航栏默认首页
$(".navlist .center_1200 li").eq(0) //导航栏
.addClass("active1")
.siblings().removeClass("active1")
var index = null
//给导航绑定点击
$(".navlist .center_1200 li").on("click", function () { //点击导航栏
index = $(this).index() //获取导航栏的下标
$(this).addClass("active1")
$(this).siblings().removeClass("active1") //siblings筛选兄弟元素
})
//给导航栏绑定鼠标划入事件
$(".navlist .center_1200 li").on("mouseenter", function () { //点击导航栏
let index = $(this).index() //获取导航栏的下标
$(this).addClass("active1")
$(this).siblings().removeClass("active1") //siblings筛选兄弟元素
})
$(".navlist .center_1200 li").on("mouseleave", function () { //点击导航栏
$(".navlist .center_1200 li").eq(index).addClass("active1").siblings().removeClass("active1")
})
})
//导航栏点击事件
$(".headerLeft>.listitem").click(function () { //点击导航栏
var index = $(this).index() //获取导航栏的下标
$(this).addClass("active")
$(this).siblings().removeClass("active")//siblings筛选兄弟元素
//控制下方正确的数据显示
$('.navlist .navitem').eq(index).show();
$('.navlist .navitem').eq(index).siblings().hide();
})
//find方法获取子类
$(".contentList .item").click(function(){
$(this).addClass("active1")
$(this).find("p").addClass("active2")
$(this).siblings().find("p").removeClass("active2")
$(this).siblings().removeClass("active1")
})
//手机端控制导航条显示和隐藏
$("header>.right").click(function (e) {
$(".muenlist").css({
"display": "block"
})
e.stopPropagation();
})
$("body").click(function (e) {
$(".muenlist").hide()
e.stopPropagation();
})
//监听页面滚动，设置对应动效
$(window).scroll(function () {
var scroH = $(window).scrollTop(); //滚动高度
// var viewH = $(window).height(); //可见高度
// var contentH = $(document).height(); //内容高度
if (scroH > 20) { //距离顶部大于100px时
$(".imglist").css({
"transform": "rotate3d(0,1,0,180deg)",
"transition": "all 2s"
})
}
})
$("body,html").animate(
{
scrollTop: 0,
},
500
);
```js
document.onkeydown = function (e) { //对整个页面监听
var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
//判断如果用户按下了回车键（keycody=13）
if (keyNum == 13) {
$("#submit1").trigger(“click”);
}
}
KaTeX parse error: Expected '}', got 'EOF' at end of input: … { ("#submit").trigger(“click”);
}
});
## 手机端布局，适配
**方式一**
```js
<style>
html{
font-size: 26.666667vw; // 100vw/3.75
}
body{
font-size: 16px;
}
</style>
方式二
//以320为例子
let fontSize = document.documentElement.clientWidth / 3.20
document.documentElement.style.fontSize = fontSize + "px"
body{
font-size: 16px;
}
<link rel="stylesheet" href="./index.css" media="all and (min-width:750px)">
all也可以换成 横/竖屏来区别
(arientation:portrait)
(arientation:landscape)
先写正常的css，在css后添加媒体查询，覆盖之前的样式
@media screen and (min-width: 500px) and (max-width: 800px) {
//body 必须有
body {
background-color: red;
}
}
html {
font-size: 6.53595vw;
color: #333;
}
body {
font-size: 16px;
}
账号：
zd.zhengding.org.cn
wei_zhengding
NkFcLFaHJMGRfiSP
1.快捷键 ctrl+shift+p
2.输入 sftp:config
3.具体配置项
{
“name”: “征订后台管理publish”,
“host”: “zd.zhengding.org.cn”,
“protocol”: “ftp”,
“port”: 21,
“username”: “wei_zhengding”,
“password”: “NkFcLFaHJMGRfiSP”,
“remotePath”: “/template/admin_style/zhengding/zhengding/publish/”,
“uploadOnSave”: true,
“ignore”: [
“.vscode”,
“. git ”,
“cmf/ data /config/databse.php”
]
}
4.在ftp上下载对应文件，在本地创建一个文件夹，该文件夹不会被上传，只会上传文件夹下的文件
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删
技术文档
推荐好文
155-2731-8020
