Ajax渲染+图片服务器

最新推荐文章于 2023-02-11 11:24:31 发布
最新推荐文章于 2023-02-11 11:24:31 发布
阅读量193 收藏 2
点赞数 2
文章标签： javascript ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/charliep/article/details/126493821
版权

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");
});
 

CharlesX5
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Ajax获取二进制数据流图片渲染到img标签
rongDang的博客
07-26 1万+
这里我用的是python3.6+Flask。实现一个登录时的验证码，点击通过Ajax的方式获取后台传来的二进制数据 python绘制图片验证码，具体解释都有     Code.py # -*- encoding:utf8 -*- import random import string from PIL import Image, ImageDraw, ImageFont # Image:...
ajax请求二进制流图片并渲染到html中img标签
weixin_34245082的博客
04-13 861
日常显示图片都诸如这种形式：直接使用img的src属性 &lt;img src="图片路径、地址" alt="" /&gt; 以上方法无法在获取图片请求中设置请求头(headers)中字段   方法二： var xmlhttp; xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","http://10.10.0.62:10001/api/char...
手写ajax 请求并将获取到的图片二进制流渲染到页面上
weixin_43720534的博客
03-16 481
话不多说代码附上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta http-equ
借鉴！！模拟ajax获取数据并渲染页面
zyl23456的博客
05-15 768
通过ajax请求数据后，进行页面渲染。 文件介绍 1.goods.json，用于模拟后台接口数据 { "cursor": 0, "size": 40, "page": 0, "result": [{ "price": "1000", "name": "小米手机", "imgUrl": "img/1.png" }, { "price": "2000", ...
echarts使用
weixin_44213835的博客
06-18 1617
1. 绘制简单图表 （1）在绘图前需要为Echarts准备一个有宽高的DOM容器 <div id="main" style="width: 600px;height:400px;"></div> （2）通过echarts.init方法初始化一个echart实例 // 基于准备好的dom，初始化echarts实例，使用这种方法需保证容器已经有宽度和高度了 var myChart = echarts.init(document.getElementById('main')); //
微信小程序--ajax服务器交互及页面渲染
03-29
而我想实现的是点击按钮，然后请求服务器，接着返回数据，前端页面渲染。所以搞了挺久的，在此记录一下。请求是按照微信官方给出的,wx.request在这 ...       这篇是特意分开写的。网上找的帖子大多是直接在...
Ajax获取node服务器数据的完整步骤
12-16
因为是要将服务器获取的数据放在网页中 所以说对页面的渲染是必要的 这里我准备的是 art-template模板 2.服务器的准备 服务器要准备好渲染到页面的数据 3.页面的操作 这里我做的的是一个搜索框提示功能 讲解都在代码...
sinau_c3_ajax:使用Ajax服务器端渲染数据表
05-06
AJAX Codeigniter 3 使用CRUD ajax datatables服务器端codeigniter 3，使用虚拟mysql数据库数据。使用的功能包括： Order by Searching Pagenation form validation library javascript pop up sweet alertgit克隆：...
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
08-28
主要介绍了微信小程序ajax实现请求服务器数据及模版遍历数据功能,结合实例形式分析了微信小程序ajax调用及模板wx:for循环列表渲染相关操作技巧,需要的朋友可以参考下
Ajax定义浅要剖析
01-08
在一般的通讯方式当中，我们是通过在浏览器地址栏输入相关链接，完成客户端与服务器的通讯。 输入网址->请求一个网页->返回相关资源文件->浏览器解析资源文件，完成页面渲染。 假设，目前我们在浏览器上看到的页面，...
vue echarts axios 代码实现
qq_51313111的博客
07-23 263
放代码 <template> <div> <div id="main" :style="{width: '100%', height: '500px'}"></div> </div> </template> <script> import * as echarts from 'echarts'; import { ToolboxComponent, TooltipComponent, GridC
3.echarts多次复用一个dom，图表初始化报错
qq_46090071的博客
04-02 1557
echarts多次复用一个dom，图表初始化报错 //定义对象 var myChart = null //获取dom对象 var div_ = document.getElementById('mainSchedule') //将dom对象上的图标清除 div_.removeAttribute("_echarts_instance_") //初始化图表 m
echarts 图标
weixin_45677987的博客
03-02 233
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); // 获取dom元素 var myChart = echarts.init(chartDom); // 初始化实例 var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'W...
关于Echarts的使用以及修改图形样式
weixin_50641294的博客
01-24 6240
关于Echarts的使用以及修改图形样式 1.引入js文件 echarts官方网址 https://echarts.apache.org/
Echarts学习笔记~
你看起来很好玩
09-23 4103
好久没更新了，之前都在忙找实习的事情，所以就停了一段时间，现在要重新加油啦~不可以偷懒~这两天学习了Echarts的用法，实际来说，他的很多功能在echart的文档当中都写的很清楚了，我最开始学习的是地图的用法，然而，我没有加载地图，所以就给BUG了，所以如果要写关于地图类的数据表，一定要加载地图的信息，不要和我一样蠢……………….今天第一个主要是写关于echarts加载json数据的学习笔记先贴j
单轴散点图 js
weixin_50927106的博客
02-05 503
单轴散点图 js代码 import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; var hours = [ 'A']; var days = ['1']; var data = [数据集]; option = { tooltip: { position: 'top'
VUE3.2 项目使用Echarts5.4总结
用自己的话说出来才算理解，用自己的方法做到才算会用
02-11 1564
VUE3.2 项目使用Echarts5.4总结
echarts笔记
u014645827的博客
05-19 234
1，监听图表容器的大小并改变图表大小 <style> #main, html, body { width: 100%; } #main { height: 400px; } </style> <div id="main"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('...
echarts map
Claroja
12-21 714
var myChart = echarts.init(document.getElementById('main'));// 基于准备好的dom，初始化echarts实例 data1=[//自动将第一维度和第二维度数据映射为坐标 [121.15,31.89,9], [109.781327,39.608266,12], ]; data2=[//添加了名称可以在地图上显示，这个
layui ajax渲染input
最新发布
05-12
2. 在js文件中，使用ajax方法请求服务器端数据，并且将数据渲染到input标签中。 ``` //使用ajax请求数据 $.ajax({ url: 'server.php', //服务器端接口地址 type: 'get', //请求方式 dataType: 'json', //返回...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值