0204 ajax练习调用接口，引入echarts

最新推荐文章于 2022-11-11 10:55:45 发布

DumFuxx

最新推荐文章于 2022-11-11 10:55:45 发布

阅读量105

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/weixin_54056549/article/details/113641227

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Ajax</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js"></script>
</head>
<body>
<table>
    <thead>
        <tr>
            <td>序号</td>
            <td>英文</td>
            <td>数字</td>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<input id="count" type="text"><button id="submit">提交</button>
<div id="box" style="width:600px;height:500px;background-color: #ff6600;"></div>
</body>
<script>
    $("#submit").click(function(){
        var myChart = echarts.init(document.getElementById('box'));//初始化地图容器
        $('tbody').empty();//清空我的请求结果
        $.ajax({
            url:'http://jiekou.laiyue.work',//请求地址
            type:'post',//请求方式 post get
            dataType:'json', //数据格式
            data:{  //data 向后台 传输数据
                mysize:$('#count').val(),  //来十条数据
            },
            success:function (response) {//请求成功响应结果
                console.log(response)
                for(var i = 0; i<response.data1.length;i++){
                    var htmlStr = '<tr>\n' +
                        '        <td>'+(i+1)+'</td>\n' +
                        '        <td>'+response.data2[i]+'</td>\n' +
                        '        <td>'+response.data1[i]+'</td>\n' +
                        '    </tr>'
                    $('tbody').append(htmlStr);
                }
                var option ={
                    title:{
                        text:'随机数统计', //主标题
                        link:'https://www.baidu.com/', //标题跳转链接
                        textStyle:{ //标题字体样式
                            color:'white'//主标题颜色
                        },
                    },
                    legend: {
                        formatter: function (name) {
                            return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
                        },
                        tooltip: {
                            show: true
                        }
                    },
                    tooltip: {},//鼠标移动到对象显示值
                    xAxis: {
                        axisLabel:{
                          interval:0,//刻度间隔
                          rotate:45 //刻度旋转角度
                        },
                        type: 'category',
                        data: response.data2,
                        name:'x轴',
                    },
                    yAxis: {
                        type: 'value',
                        name: 'y轴',
                        axisLine:{
                             lineStyle:{
                                 color:'#ff7097'//y轴颜色 16进制颜色
                             },
                            },
                    },
                    series: [{
                        data: response.data1,
                        type: 'line',
                        lineStyle:{
                             color:'#FF7097'//线条颜色
                         },
                    },{
                        data: response.data1,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                };
                myChart.setOption(option);
            }
        });
    });
</script>
</html>

DumFuxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0204 ajax练习调用接口，引入echarts

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>初识Ajax</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https:
复制链接

扫一扫