Echarts最简单的折线图、柱图、饼图、仪表盘+sql语句

最新推荐文章于 2024-05-15 16:53:15 发布

清词醉草

最新推荐文章于 2024-05-15 16:53:15 发布

阅读量6.7k

点赞数 2

分类专栏： java后台文章标签： Echart 柱状图折线图饼图

本文链接：https://blog.csdn.net/weixin_40778442/article/details/81625455

版权

java后台专栏收录该内容

20 篇文章 0 订阅

订阅专栏

注：以后所有升级版的图形化显示都在此基础上延伸,打好基础才是硬道理本人小白一枚〜欢迎来讨论

一，柱图显示：

HTM页面：

<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 800px; margin: 0">
<button id="refresh">刷新</button>
<div id="container" style="height: 500px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">

    var names = [];    //文章类别数组（实际用来盛放X轴坐标值）
    var nums = [];    //文章个数数组（实际用来盛放Y坐标值）

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    app.title = '坐标轴刻度与标签对齐';

    $.ajax({
        type: 'get',
        url: Aexit.ctxPath +"/Statistics/articles",//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (data) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each($.parseJSON(data), function (index, item) {
                names.push(item.typename);    //挨个取出类别并填入数组
                nums.push(item.num);    //挨个取出个数并填入数组
            });
            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 : names,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:nums
                    }
                ]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        },

        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");

            myChart.hideLoading();
        }
    });

    $(document).ready(function(){
        $("#refresh").click(function () {
            window.location.href=Aexit.ctxPath +"/Statistics/article";
        })

    })
</script>
</body>
</html>

控制器：


    @RequestMapping("/articles")
    @ResponseBody
    public String article() {
        List<Article> list = bizService.selecttypename();
        String data = JSON.toJSONString(list);
        return data;
    }

SQL语句：

<select id="selecttypename" resultType="net.aexit.inner.aexithome.common.model.Article">
        SELECT
          ar.`typename` typename,
          t1.num num
        FROM
          (SELECT
            a.`articletype` AS did,
            COUNT(*) AS num
          FROM
            article a
          GROUP BY a.`articletype`
          HAVING COUNT(*) >= 1) t1,
          ar_type ar
          WHERE t1.did = ar.`id`

    </select>

二，折线图显示：

折线图

HTML页面：

<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 800px; margin: 0">
<button id="refresh">刷新</button>
<div id="container" style="height: 500px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
    var nums = [];
    var title = [];
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    $.ajax({
        type: 'get',
        url: Aexit.ctxPath + "/Statistics/dafen",//请求数据的地址
        dataType: "json",
        success: function (data) {
            $.each($.parseJSON(data), function (index, item) {
                title.push(item.title);    //挨个取出类别并填入数组
                nums.push(item.num);    //挨个取出个数并填入数组
            });
            var option = {
                xAxis: {
                    type: 'category',
                    data: title
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                    precision: 2,
                    splitNumber: 9,
                    boundaryGap: [0.01, 0.01],
                    splitArea: { show: true }
                },
                series: [{
                    data: nums,
                    type: 'line'
                }]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");

            myChart.hideLoading();
        }
    });

    $(document).ready(function(){
        $("#refresh").click(function () {
            window.location.href=Aexit.ctxPath + "/Statistics/dafens";
        })

    })
</script>
</body>
</html>

控制器：

 @RequestMapping("/dafen")
    @ResponseBody
    public String dafen(){
        List<Article> list = bizService.selectdafen();
        String data = JSON.toJSONString(list);
        return data;
    }

SQL语句：

<select id="selectdafen" resultType="返回Model">
        SELECT
          a.`title`,
          ar.`grade` num
        FROM
          ar_grade ar
          INNER JOIN article a
            ON a.`id` = ar.`arid`
    </select>

三，饼图显示

HTML页面：

注释：var obj = new Object（）; 一定要写在循环内〜指向不同的地址〜不然会覆盖〜

<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 500px; margin: 0">
<div id="container" style="height: 300px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var res = [];
    $.ajax({
        url: Aexit.ctxPath + "/Statistics/xianshi",
        dataType: "json",
        success: function (data) {
            $.each($.parseJSON(data), function (index, item) {
                var obj = new Object();
                obj.value = item.num,obj.name = item.tt;
                res.push(obj);

            });

            var option = {
                title: {
                    text: '用户文章是否可见',
                    subtext: '真实可靠',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:res.name
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: res,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");

            myChart.hideLoading();
        }
    })

</script>
</body>
</html>

控制器：

 @RequestMapping("/xianshi")
    @ResponseBody
    public String xianshi(){
        List<Article> list = bizService.selectxianshi();
        String data = JSON.toJSONString(list);
        return data;
    }

SQL：

<select id="selectxianshi" resultType="net.aexit.inner.aexithome.common.model.Article">
        SELECT
            CASE
            WHEN a.flag = 0 THEN '可见'
            WHEN a.flag = 1 THEN '不可见'
            END AS tt,
            COUNT(a.flag) AS num
            FROM article a
            GROUP BY a.flag;
    </select>

四：统计仪表盘

JSP页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<html>
<head>
    <title>采集信息分析</title>
    <script src="${ctx}/static/js/spin.js"></script>
    <script src="${ctx}/static/plugins/echarts/2.2.0/echarts.js"></script>
    <style>
        /*Echarts区域样式*/
        #drug,#medicalDevice,#qualification {
            height: 420px;
            overflow: hidden;
            padding:10px 10px 10px 10px;;
            margin: 10px 1% 10px 0;
            width: 32%;
            background-color: white !important;
            border: 1px solid #e3e3e3;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        }
        /*遮罩屏样式*/
        #bg {
            display: none;
            position: absolute;
            bottom: 0%;
            right: 0%;
            left:0%;
            top:0%;
            height: 185%;
            background-color: #CCC;
            z-index: 1001;
            -moz-opacity: 0.7;
            opacity: .70;
            filter: alpha(opacity = 70);
        }
    </style>
</head>
<body>
<%--遮罩屏--%>
<div id="bg" style="display: none"></div>
<div id="foo" style="margin:15% 0 0 50%;text-align:center;display: none;position: absolute"></div>
<ul id="con_ul" class="breadcrumb">
    <li class="active">数据分析</li>
    <li class="active">采集信息分析</li>
</ul>
<div class="control-group info row">
    <div style="text-align: center;width: 20%;font-size: 20px;font-weight: bold;margin: 10px 19% 20px 36.8%; height: 30px; line-height: 30px;float:left">
        采集信息分析
    </div>
    <div id="totalCount" style="text-align: center;width: 20%;font-size: 16px;font-weight: bold;margin: 0px 19% 20px 36.8%; height: 30px; line-height: 30px;float:left">
    </div>
    <div style=" float: right; margin: 10px 0 0 0">
        <button type="button" class="btn btn-primary btn-sm" onclick="multidimensionalStatistics()">&nbsp;多维统计&nbsp;</button>
    </div>
</div>
<div class="row-fluid" style="overflow: hidden; width: 100%; margin-left: 1%">
    <div id="drug" style="float: left"></div>
    <div id="medicalDevice" style="float: left"></div>
    <div id="qualification" style="float: left"></div>
</div>
<script type="text/javascript">
    var totalCount = 0;//采集信息总数
    var infoList = "";//成功返回数据
    //创建数组（获取三个DIV的ID名称）
    var typeList = new Array();
    typeList[0] = 'drug';
    typeList[1] = 'medicalDevice';
    typeList[2] = 'qualification';
    //创建数组（用于判断数据类型）
    var typeNameList = new Array();
    typeNameList[0] = '药品';
    typeNameList[1] = '器械';
    typeNameList[2] = '资质';
    //创建数组（用于判断数据类型）
    var typeCodeList = new Array();
    typeCodeList[0] = '20';
    typeCodeList[1] = '30';
    typeCodeList[2] = '10';
    //创建Map，用于数据类型缺失补0操作
    var typeMap = {};
    typeMap['10'] = 0;
    typeMap['20'] = 0;
    typeMap['30'] = 0;
    $(function () {
        showDiv();
        $.ajax({
            url: "${ctx}/infoCollectionAnalysis/getInfoCollectionAnalysis",
            async: false,
            type: "POST",
            dataType: "json",
            success: function (data) {
                infoList = data;
                for (var i = 0; i < data.length; i++) {
                    if (null != data[i]) {
                        totalCount += data[i].typesCount;
                    }
                }
                for (var i = 0; i < typeList.length; i++) {
                    if (null != data[i]) {
                        if (data[i].types == '10') {
                            typeMap['10'] = data[i].typesCount;
                        }
                        if (data[i].types == '20') {
                            typeMap['20'] = data[i].typesCount;
                        }
                        if (data[i].types == '30') {
                            typeMap['30'] = data[i].typesCount;
                        }
                    }
                    showECharts(typeMap, typeList[i], typeNameList[i], typeCodeList[i]);
                }
              
                $("#totalCount").html("第三方采集信息总数" + totalCount + "条");
                setTimeout(function () {hideDiv();}, 1000);
            }
        });
    });

    //向Echarts统计仪表盘铺数据
    function showECharts(data, type, typeName, typeCode) {
        require.config({
            paths: {
                'echarts': '${ctx}/static/plugins/echarts/2.2.0'
            }
        });
        require([ 'echarts', 'echarts/chart/gauge' // 使用仪表就加载gauge模块，按需加载
        ], function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById(type));
            option = {
                title: {
                    text: typeName,
                    textStyle:{
                        fontSize: 16,
                        fontFamily:'Microsoft Yahei',
                        fontWeight: 'bolder',
                        color: '#333'
                    },
                    x:"center",
                    subtextStyle:{
                        fontFamily:'Microsoft Yahei',
                        color: '#333'
                    }
                },
                tooltip: {
                    show: true,
                    formatter: "{a} <br/>{b} : {c}"
                },
                series: [
                    {
                        name: typeName + '采集',
                        type: 'gauge',
                        max: totalCount,//总数
                        //表盘下方显示数字
                        detail: {formatter: data[typeCode]},
                        //鼠标悬停指针时显示数据
                        data: [{value:data[typeCode], name: '数量'}],//药品采集信息数量
                        axisLine:{
                            show: true,
                            lineStyle: {
                                color: [
                                    [0.2, '#00FF00'],
                                    [0.8, '#FF9900'],
                                    [ 1,'#FF3300']
                                ],
                                width: 20
                            }
                        }

                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        });
    }


    //多维统计
    function multidimensionalStatistics(){
        window.location.href="${ctx}/infoCollectionAnalysis/multidimensionalCount";
    }
    //显示遮罩屏
    function showDiv() {
        document.getElementById("bg").style.display = "block";
        document.getElementById("foo").style.display = "block";
        document.getElementById("bg").style.width=(window.screen.availWidth -225)+"px";
        var opts = {
            lines: 13, // The number of lines to draw ????
            length: 20, // The length of each line ???е????
            width: 10, // The line thickness ????
            radius: 17, // The radius of the inner circle ??????
            corners: 1, // Corner roundness (0..1) ???????
            rotate: 0, // The rotation offset ???????
            direction: 1, // 1: clockwise,?????? -1: counterclockwise ???????
            color: '#000', // #rgb or #rrggbb or array of colors
            speed: 1, // Rounds per second ?????
            trail: 60, // Afterglow percentage ??????
            shadow: false, // Whether to render a shadow ??????????????
            hwaccel: false, // Whether to use hardware acceleration ?????????????
            className: 'spinner', // The CSS class to assign to the spinner ????????CSS??
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            top: 'auto', // Top position relative to parent in px ?λ????????px
            left: 'auto' // Left position relative to parent in px ??λ????????px
        };
        var target = document.getElementById('foo');
        var spinner = new Spinner(opts).spin(target);
        $("div.spinner").append("<div style='margin: 80px 0 0 -100px;width:200px '>系统正在努力统计中...</div>");
    }
    //关闭遮罩屏
    function hideDiv() {
        document.getElementById("bg").style.display = 'none';
        document.getElementById("foo").style.display = 'none';
        $("#foo").empty();
    }
</script>
</body>
</html>

控制器：

 /**
     * 获取信息采集统计信息.
     * @return 信息采集统计信息
     */
    @RequestMapping(value = "getInfoCollectionAnalysis")
    @ResponseBody
    public List<Object> getInfoCollectionAnalysis() {
        return infoCollectionAnalysisService.getInfoCollectionAnalysis();
    }

SQL：

SELECT types, count(1) AS types_count FROM two_info_collection WHERE usable = 1 GROUP BY types

五：3D 饼图；

说明：这个也就比较简单的了，页面上完全可以定义两个数组<div> 循环插入两个饼图。我直接复制过来的！

JSP页面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="${ctx}/static/hichar/highcharts.js"></script>
    <script src="${ctx}/static/hichar/highcharts-3d.js"></script>
    <script src="${ctx}/static/hichar/sand-signika.js"></script>
</head>
<body>
<!--
*************************************************************************
   Generated by JShare at 2018-09-03 14:12:20
   From: https://jshare.com.cn/demos/hhhhiT?hc-theme=sand-signika
*************************************************************************
 -->

<ul id="con_ul" class="breadcrumb">
    <li class="active">数据管理</li>
    <li class="active">虚假可用性和准确性统计</li>
</ul>
<div class="control-group info row">
    <div style="text-align: center;width: 20%;font-size: 20px;font-weight: bold;margin: 10px 19% 20px 36.8%; height: 30px; line-height: 30px;float:left">
        虚假可用性和准确性统计
    </div>

    <div style=" float: right; margin: 10px 0 0 0">
        <button type="button" class="btn btn-primary btn-sm" onclick="_kezhun()">&nbsp;多维统计&nbsp;</button>
    </div>
</div>
<div class="row-fluid" style="overflow: hidden; width: 100%; margin-left: 1%">
    <div id="drug" style="float: left"></div>
    <div id="medicalDevice" style="float: left"></div>
</div>
<script>
    var res = [];
    var rest=[];
    $.ajax({
        url: "${ctx}/durgshamdic/shows/tongjiz",
        async: false,
        type: "POST",
        dataType: "json",
        success: function (data) {
            $.each(data, function (index, item) {
                var objn = new Array();
                objn = [item.name,item.valuez];
                rest.push(objn);

                var objno = new Array();
                objno =[item.name,item.valuek];
                res.push(objno);
            });
        }
    });

     Highcharts.chart('drug', {
         chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: '统计分析可用性'
        },
        subtitle: {
            text: '可用'
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        series: [{
            name: '可用个数',
            data: res
        }]
    });
      Highcharts.chart('medicalDevice', {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: '统计分析准确性'
        },
        subtitle: {
            text: '准确'
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        series: [{
            name: '准确个数',
            data: rest
        }]
    });



</script>
<script>
    function _kezhun(){
        window.location.href="${ctx}/durgshamdic/shows/kezhun";
    }
</script>
</body>
</html>

Controller控制器：


    @RequestMapping(value = "tongjiz")
    @ResponseBody
    public String tongjia() {
        List<DrugShame> list=drugShamService.kezhun();
        JSONArray statisticsList = new JSONArray();
        for (int i = 0; i < list.size(); i++) {
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("name", list.get(i).getName());
            jsonObject.put("valuek", list.get(i).getKeyong());
            jsonObject.put("valuez", list.get(i).getZhunque());
            statisticsList.add(jsonObject);
        }
        return statisticsList.toString();
    }

Sql语句：

select name, sum(keyong) keyong, sum(zhunque) zhunque
  from (select '药品' name,
               count(case d.ACCURACYS
                       when '1' then
                        '准确数'
                     end) zhunque,
               count(case AVAILABLES
                       when '1' then
                        '可用数'
                     end) keyong
          from drug_sham d
        union
        
        select '医疗器械' name,
               count(case e.ACCURACYS
                       when '1' then
                        '准确数'
                     end) zhunque,
               count(case AVAILABLES
                       when '1' then
                        '可用数'
                     end) keyong
          from equipment_sham e
        union
        
        select '资质' name,
               count(case q.ACCURACYS
                       when '1' then
                        '准确数'
                     end) zhunque,
               count(case AVAILABLES
                       when '1' then
                        '可用数'
                     end) keyong
          from qualifications_sham q
        union
        
        select case types
                 when '20' then
                  '非电商类药品'
                 when '30' then
                  '非电商类医疗器械'
                 when '10' then
                  '非电商类资质'
               end,
               count(case ACCURACYS
                       when '1' then
                        '准确数'
                     end) zhunque,
               count(case AVAILABLES
                       when '1' then
                        '可用数'
                     end) keyong
          from two_unecommerce_sham us
         where us.availables = '1'
         group by types) temp
         
 group by temp.name

清词醉草

关注

2
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
Echarts最简单的折线图、柱图、饼图、仪表盘+sql语句

注：以后所有升级版的图形化显示都在此基础上延伸,打好基础才是硬道理本人小白一枚〜欢迎来讨论一，柱图显示：HTM页面：&lt;html style="height: 100%"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;/head&gt;&lt;body style="height: 800px; mar
复制链接

扫一扫

专栏目录