Ajax渲染+图片服务器
Ajax渲染+图片服务器
let mockURL = "https://www.fastmock.site/mock/3673f58d6ada912cec83594fb7fee88a/fitness";
let currentMonth = "6月"; //默认月份
// Echart自适配
window.addEventListener("resize", function(event) {
myChart.resize();
myChart_2.resize();
myChart_3.resize();
myChart_4.resize();
})
$(document).click(function() {
$(".choice").hide();
})
$(".month").tap(function(event) {
event.stopPropagation();
$(".choice").toggle();
})
// 第二个月份切换
$(document).click(function() {
$(".choice-2").hide();
})
$(".month-2").tap(function(event) {
event.stopPropagation();
$(".choice-2").toggle();
})
// 第三个月份切换
$(document).click(function() {
$(".choice-3").hide();
})
$(".month-3").tap(function(event) {
event.stopPropagation();
$(".choice-3").toggle();
})
// 第一个Ecahrts图表
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
$(function() {
let _currentMonth = sessionStorage.getItem("currentMonth") || "6月";
// 确认当前是否有默认值,有就选中
$(".choice li").each(function(index, el) {
if ($(el).text() == _currentMonth) {
$(".month").text(_currentMonth);
}
})
// 首次进入加载页面
updateDate(_currentMonth);
// 点击li切换月份
$(".choice li").tap(function() {
currentMonth = $(this).text()
console.log(currentMonth);
$(".month").text(currentMonth);
$(".choice").hide();
updateDate(currentMonth);
sessionStorage.setItem("currentMonth", currentMonth);
})
})
function updateDate(currentMonth) {
$.ajax({
url: mockURL + "/api/chart_data",
type: "post",
data: {
month: currentMonth
},
success(res) {
myData = res.data.list[0];
console.log(myData);
console.log(myData.date);
console.log("2020", myData.data_2020);
console.log("2021", myData.data_2021);
console.log("2022", myData.data_2022);
console.log(myChart);
// 第一个Ecahrt表格
option = {
color: ['#00DDFF', '#37A2FF', '#FFBF00'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
fontSize: 16,
}
},
legend: {
data: ['2020', '2021', '2022']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '1%',
right: '2%',
bottom: '0%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisTick: {
show: false, //刻度线
},
axisLabel: {
inside: false,
textStyle: {
color: '#000',
fontSize: '14', //调节字体
itemSize: ''
}
},
data: myData.date
}],
yAxis: [{
type: 'value',
axisLine: {
show: false, //隐藏y轴
},
axisLabel: {
show: false, //隐藏刻度值
},
}],
series: [{
name: '2020',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series'
},
data: myData.data_2020
},
{
name: '2021',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(55, 162, 255)'
},
{
offset: 1,
color: 'rgb(116, 21, 219)'
}
])
},
emphasis: {
focus: 'series'
},
data: myData.data_2021
},
{
name: '2022',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top',
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 191, 0)'
},
{
offset: 1,
color: 'rgb(224, 62, 76)'
}
])
},
emphasis: {
focus: 'series'
},
data: myData.data_2022
}
]
};
option && myChart.setOption(option);
// 显示你的体重
let sum = 0;
myData.data_2022.forEach((item) => {
sum += item;
})
$(".weight").text(parseInt(sum / myData.data_2022.length));
// 显示锻炼天数+显示增加体重
if (currentMonth == "6月") {
$(".sumDay").text(`448`);
$(".sumWeight").text(`8`);
} else if (currentMonth == "7月") {
$(".sumDay").text(`478`);
$(".sumWeight").text(`6`);
} else {
$(".sumDay").text(`515`);
$(".sumWeight").text(`2`);
}
//输入值
$(".cancel-btn").tap(function() {
$(".mask").css("display", "none");
$(".form-box").css("display", "none");
});
$(".confirm-btn").tap(function() {
$(".inputWeight").val("kg");
$(".mask").css("display", "none");
$(".form-box").css("display", "none");
});
}
})
}
// 轮播图
let orderSwiper = new Swiper('.swiper', {
on: {
slideChangeTransitionEnd: function(swiper) {
console.log(this.activeIndex);
updateNavStyle(this.activeIndex);
},
},
})
document.querySelector('#nav').onclick = function(event) {
Array.from(this.children).forEach(function(item, index) {
if (item.classList.contains('active')) {
item.classList.remove('active');
}
});
if (event.target.nodeName == 'DIV') {
event.target.classList.add('active');
let index = event.target.getAttribute('data-index');
//swiper提供的根据索引切换
orderSwiper.slideTo(index);
}
}
function updateNavStyle(slideActiveIndex) {
let navItems = document.querySelectorAll("#nav div");
for (let i = 0; i < navItems.length; i++) {
let dataIndex = navItems[i].getAttribute('data-index');
if (slideActiveIndex == dataIndex) {
navItems[i].classList.add('active');
} else {
navItems[i].classList.remove('active');
}
}
}
// 第二部分:
// 点击li切换月份
$(".choice-2 li").tap(function() {
currentMonth_calo = $(this).text()
console.log(currentMonth_calo);
$(".month-2").text(currentMonth_calo);
$(".choice-2").hide();
})
//第二个图表
let chartDom_2 = document.getElementById('main_2');
let myChart_2 = echarts.init(chartDom_2);
let option_2;
option_2 = {
color: ['#FFBF00'],
tooltip: {
formatter: '{a} <br/>{b} : {c}' //表盘显示格式
},
series: [{
name: '卡路里消耗',
type: 'gauge',
progress: {
show: true
},
min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
max: 2500, // 最大的数据值,默认 100 。映射到 maxAngle。
detail: {
valueAnimation: true,
formatter: '{value}'
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 191, 0)'
},
{
offset: 1,
color: 'rgb(224, 62, 76)'
}
])
},
data: [{
value: `1980`,
// name: 'Cal'
}]
}]
};
option_2 && myChart_2.setOption(option_2);
// 第三个echart图表
var chartDom_3 = document.getElementById('main_3');
var myChart_3 = echarts.init(chartDom_3);
var option_3;
option_3 = {
color: ['#00DDFF', '#37A2FF', '#FFBF00'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
fontSize: 20,
}
},
legend: {
data: ['2020', '2021', '2022']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '1%',
right: '2%',
bottom: '0%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisTick: {
show: false, //刻度线
},
axisLabel: {
inside: false,
textStyle: {
color: '#000',
fontSize: '14', //调节字体
itemSize: ''
}
},
data: ['06/01', '06/05', '06/10', '06/15', '06/20', '06/25', '06/30']
}],
yAxis: [{
type: 'value',
axisLine: {
show: false, //隐藏y轴
},
axisLabel: {
show: false, //隐藏刻度值
},
}],
series: [{
name: '2022',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top',
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 191, 0)'
},
{
offset: 1,
color: 'rgb(224, 62, 76)'
}
])
},
emphasis: {
focus: 'series'
},
data: [1982, 2315, 1876, 1980, 2368, 1500, 2567]
}]
};
option_3 && myChart_3.setOption(option_3);
// 第四部分
// 切换月份
$(".choice-3 li").tap(function() {
currentMonth_size = $(this).text()
console.log(currentMonth_size);
$(".month-3").text(currentMonth_size);
$(".choice-3").hide();
})
//输入值
$(".cancel-btn").tap(function() {
$(".mask").css("display", "none");
$(".form-box-3").css("display", "none");
});
$(".confirm-btn").tap(function() {
$(".input_size").val("cm");
$(".mask").css("display", "none");
$(".form-box-3").css("display", "none");
});
// 第四个Ecahrt图表
var chartDom_4 = document.getElementById('main_4');
var myChart_4 = echarts.init(chartDom_4);
var option_4;
option_4 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
fontSize: 20,
}
},
legend: {
data: ['2020', '2021', '2022']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '1%',
right: '2%',
bottom: '0%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisTick: {
show: false, //刻度线
},
axisLabel: {
inside: false,
textStyle: {
color: '#000',
fontSize: '14', //调节字体
itemSize: ''
}
},
data: ['06/01', '06/05', '06/10', '06/15', '06/20', '06/25', '06/30']
}],
yAxis: [{
type: 'value',
axisLine: {
show: false, //隐藏y轴
},
axisLabel: {
show: false, //隐藏刻度值
},
}],
series: [{
name: '胸围',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series'
},
data: [18, 25, 16, 19, 17, 29, 20]
},
{
name: '腰围',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 191, 0)'
},
{
offset: 1,
color: 'rgb(224, 62, 76)'
}
])
},
emphasis: {
focus: 'series'
},
data: [27, 15, 32, 15, 29, 18, 22]
},
{
name: '臀围',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top',
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(55, 162, 255)'
},
{
offset: 1,
color: 'rgb(116, 21, 219)'
}
])
},
emphasis: {
focus: 'series'
},
data: [17, 25, 15, 27, 21, 25, 18]
}
]
};
option_4 && myChart_4.setOption(option_4);
// 遮罩层-1
$(".menu").tap(function() {
$(".mask").css("display", "block");
$(".form-box").css("display", "block");
})
$(".mask").tap(function() {
$(".mask").css("display", "none");
$(".form-box").css("display", "none");
});
// 遮罩层-3
$(".menu-3").tap(function() {
$(".mask").css("display", "block");
$(".form-box-3").css("display", "block");
})
$(".mask").tap(function() {
$(".mask").css("display", "none");
$(".form-box-3").css("display", "none");
});
Ajax渲染+图片服务器相关推荐
- python 服务端渲染_客户端渲染和服务器渲染的区别
我们都知道,网页上的很多内容之所以能那么丰富,是因为大量的css.js去渲染出这个页面.那么他们是如何渲染的呢?那么就要说到我们本文的两种渲染方式了,即客户端渲染和服务端渲染. 正文 本文将分别讲述两 ...
- 客户端渲染和服务器渲染的区别
客户端渲染和服务器渲染的区别 前言 正文 一.客户端渲染 图片讲解 文字讲解 真实的客户端渲染案例 优点 缺点 二.服务器渲染 图片讲解 文字讲解 真实的服务器渲染案例 优点 缺点 三.如何区分客户端 ...
- 图片服务器项目编写思路
引言:在QQ中更换头像时,点击上传本地照片时,看到下面这个窗口有了想法,自己是否也可以做出类似的图片服务器呢?(当然自己的肯定没有这个高大上~~~~~~) 一. 项目背景 现在很多网页都可以见到上传图 ...
- 前端后分离深入分析 ——浏览器渲染和服务器渲染区别
1.为什么会有服务器渲染与客户端渲染? 首先理解服务器和浏览器客户端之间传递的是什么--HTML,CSS,JavaScript的文件以及数据载体json(xml)等文件,而文件都是静态,之所以动态是应 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- CSS、JavaScript和Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
- ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
- Ajax库-认识服务器,URL地址,axios基本用法,响应状态码,业务状态码,接口测试工具
AjaxDay01 学习目标 1.理解客户端与服务器通信的过程 2.掌握 axios 的使用 3.了解接口文档的概念 服务器相关基础概念 概念:服务器是提供服务的设备(本质上就是一台电脑主机). 作用 ...
最新文章
- 【Java】排序算法 之 【归并排序】 总结
- 如何修改博士论文?这份45页PPT《Editing your thesis》教你
- linux下.rar的文件,Linux下.rar压缩文件处理 (RAR 4.11 for linux )
- socket/WebSocket/WebService/http/https概念
- 279. 完全平方数 golang
- MySQL 之 存储过程
- SpringMvc 跨域
- 构建高性能ASP.NET站点 第七章 如何解决内存的问题(后篇)—托管资源优化—监常用优化措施...
- Linux 配置Tomcat
- python的字典合并有相同的_将列表中的重复项合并到python字典中
- 《MySQL从入门到精通》读书笔记
- Python Tkinter 音乐播放器 Demo
- 曾宪武《物联网通信技术》课后答案(二)
- 51nod1534 棋子游戏
- 黑客郭盛华虚假新闻_每日新闻摘要:黑客闯入十个电信网络
- sublime教程以及python环境的配置(二)常用插件安装和Boxy主题配置
- 【公司邮箱如何申请】怎么写加密邮件,企业邮箱支持吗?
- Variable used in lambda expression should be final or effectively final
- Cat4模块SIM7600CE介绍
- sourcetree神操作
热门文章
- 74LS164的使用
- java abort_Java AbortException類代碼示例
- windows 不能在本地计算机启动apache2。有关更多信息,查阅系统事件日志。如果这是非Microsoft服务,请与服务厂商联系,并参考特定服务错误代码1
- COMPUTER VISION FOR COVID-19 CONTROL: A SURVEY
- 轻芒范怀宇:中小型互联网企业如何稳步向前?
- libsvm数据格式
- LIBSVM 下载使用及实战
- 拍照、相册及裁剪的终极实现(一)——拍照及裁剪功能实现
- R语言使用plot函数和lines函数可视化多条折线图(线图、line charts)进行对比分析、设置type参数自定义线条和点的关系、设置lty设置线条类型、col设置颜色、pch设置点形状等
- 反弹shell(未完待续)