angular动态数据展示

最新推荐文章于 2023-03-20 07:30:20 发布

原创最新推荐文章于 2023-03-20 07:30:20 发布 · 1.5k 阅读

CC 4.0 BY-SA版权

这个博客展示了如何使用Angular框架动态加载数据，并在页面上进行展示。通过结合使用EasyUI组件、Combobox控件从不同API获取数据，实现如机构、条款、渠道等的选择。此外，还利用Highcharts库创建了柱状图来可视化各年度案件量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" type="text/css"></link>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css" type="text/css"></link>
    <script src="js/angular/angular.js"></script>
    <script src="js/jquery/jquery-3.1.1.js"></script>
    <script src="js/highcharts/highcharts.js"></script>
    <script src="js/highcharts/themes/grid-light.js"></script>

    <link rel="stylesheet" href="js/easyui/themes/gray/easyui.css">
    <script src="js/easyui/jquery.easyui.min.js"></script>


</head>
<body ng-app="myApp">
<div class = "container">

    <div  class="row clearfix" style="margin-left: -100px;" >

        <div class="col-md-12 column" style="margin-top: 20px;">
            机构：
            <select  id="comcode" class="easyui-combotree" th:method="GET" url="data/area_com.json"  name="comcode"  vng-model="comcode" alueField="id"  textField="text" style="height: 20px;width: 180px;"></select>
            &nbsp; &nbsp; 条款：
            <select  id="tiaokuan" class="easyui-combobox" th:method="GET" url="data/tiaokuan.json"  name="tiaokuan" valueField="id"  textField="text"  style="height: 20px;width: 140px;"></select>
            &nbsp; &nbsp;渠道：
            <select id="qudao"class="easyui-combobox" th:method="GET" url="data/qudao.json"  name="qudao" valueField="id"  textField="text"  style="height: 20px;width: 140px;"></select>
        </div>

    </div>
    <p></p>
    <div class="row clearfix"  style="margin-left: -100px;" >
        <div class="col-md-12 column">
            新续转：
            <select id="xinxuzhuan" class="easyui-combobox" th:method="GET" url="data/xinxuzhuan.json" name="xinxuzhuan"  valueField="id"  textField="text"  style="height: 20px;width: 60px;"></select>
            &nbsp; &nbsp;人伤：
            <select id="renshang" class="easyui-combobox" th:method="GET" url="data/renshang.json"  name="renshang" valueField="id"  textField="text"  style="height: 20px;width: 80px;"></select>
            &nbsp; &nbsp;报案类型：
            <select id="chakanleixing" class="easyui-combobox" th:method="GET" url="data/chakan.json"  name="chakanleixing" valueField="id"  textField="text"  style="height: 20px;width: 110px;"></select>
            &nbsp; &nbsp;碰撞类型：
            <select id="penzhuang" class="easyui-combobox" th:method="GET" url="data/penzhuangleixing.json"  name="penzhuang" valueField="id"  textField="text" style="height: 20px;width: 80px;"></select>
    </div>
    </div>


    <div class = " row clearfix" style="margin-top: 30px;margin-left: 20px;">
    <div ng-controller="annualReportList">
     <table class="table table-condensed">
         <tr style="color:white; background-color: #93a1a1">
             <td ng-repeat="x in lpqdList"><b>{{ x.year }}&nbsp;年</b></td>
          </tr>
          <tr>
              <td ng-repeat="x in lpqdList"><b>{{ x.count }}&nbsp;件</b></td>
           </tr>
      </table>
      </div>
    </div>

    <div class = "row clearfix">
        <div id="container-benqi-zhuzhuang" style="width: 500px;margin: auto"></div>
    </div>
</div>
<script>
    var app = angular.module('myApp',[]);
    app.controller('annualReportList', function($scope, $http) {
        $http.get("getAnnualReportCount")
            .success(function (data) {
                $scope.lpqdList = data;
                makeZhuzhuangHight(data);
            });
    });
</script>


<script type="text/javascript">
function makeZhuzhuangHight(data){
                var year = "";
                var count = "";
                $.each(data,function(i,d){
                    year+="'"+d.year+"',";
                    count+=d.count+",";
                });
                year=year.substring(0, year.length - 1);
                count=count.substring(0, count.length - 1);
                make_benqibaofei_zhuzhuang(year,count);
            }
</script>

<script type="text/javascript">
    //本期保费柱状图
    function make_benqibaofei_zhuzhuang(year,count){
        $('#container-benqi-zhuzhuang').highcharts({
            chart: {
                type: 'column'
            },
            subtitle: {
                text: ''
            },
            title: {
                text: ' '
            },
            xAxis: {
                categories: eval("["+year+"]")
            },
            yAxis: {
                title:''
            },
            plotOptions:{
                series:{
                    borderRadius: 8,
                    dataLabels:{
                        enabled:true
                    }
                }
            },
            credits: {
                enabled: true
            },
            series: [{
                name: '各年度案件量',
                data: eval("["+count+"]")
            }]
        });
    }
    </script>
</body>
</html>