帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

highcharts综合大数据图表页面代码

帝国模板之家 2020-10-13 网页特效 评论

highcharts数据图表代码示例 ,有过车实时数据、近七日过车数据、近6个月过车数据、卡口过车量、近一年烟台人口统计、近一年烟台人口波动、人口统计(性别)、人口统计(年龄)、人口统计(国籍)、人口统计(国籍)、人口统计(文化程度)、人口统计(职业类别)、近一年人员统计、近一年人员波动统计等。

核心代码

html代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/BigDataShow.css" />

</head>
<body style="background-color: #313131;;text-align: center">
        <div id="datashow-main" class="datashow-main">
            <div id="datashow-title">
                烟台市公安局综合大数据平台
            </div>
            <div id="datashow-top-nav">
                <table border="0" align="center">
                    <tr>
                        <td><div id="datashow-nav-car" class="datashow-top-nav">
                            过车总量<br>
                            123899000001
                        </div></td>
                        <td style="width: 50%" rowspan="2">
                            <div class="wrap" style="width: 450px;">
                                <div class="items" id="Item0">
                                    <div class="itemCon">
                                        <div id="Map"  ></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td><div id="datashow-nav-people" class="datashow-top-nav">
                            人员总量<br>
                            11万
                        </div></td>
                    </tr>
                    <tr>
                        <td><div id="datashow-nav-ytpeople" class="datashow-top-nav">
                            全烟常驻人口库<br>
                            350万
                        </div></td>
                        <td><div id="datashow-nav-operation" class="datashow-top-nav">
                            运维总设备<br>
                            9000
                        </div></td>
                    </tr>
                </table>
            </div>
            <div class="datashow-charts" >
                <div class="datashow-chart" id="chart-nowcar"></div>
                <div class="datashow-chart" id="chart-7daycar"></div>
                <div class="datashow-chart" id="chart-6monthcar"></div>
                <div class="datashow-chart" id="chart-maxcar"></div>
            </div>
            <div class="datashow-charts">
                <div class="datashow-chart" id="chart-yearpeople"></div>
                <div class="datashow-chart" id="chart-peoplechange"></div>
                <div class="datashow-chart" id="chart-sexpeople"></div>
                <div class="datashow-chart" id="chart-agepeople"></div>
            </div>
            <div class="datashow-charts">
                <div class="datashow-chart" id="chart-countrypeople"></div>
                <div class="datashow-chart" id="chart-citypeople"></div>
                <div class="datashow-chart" id="chart-culturepeople"></div>
                <div class="datashow-chart" id="chart-jobpeople"></div>
            </div>
            <div class="datashow-charts">
                <div class="datashow-chart" id="chart-yearperson"></div>
                <div class="datashow-chart" id="chart-changeperson"></div>
                <div class="datashow-chart" id="chart-sexperson"></div>
                <div class="datashow-chart" id="chart-ageperson"></div>
            </div>
            <div class="datashow-charts">
                <div class="datashow-chart" id="chart-dirverperson"></div>
                <div class="datashow-chart" id="chart-foreignperson"></div>
                <div class="datashow-chart" id="chart-prisonperson"></div>
                <div class="datashow-chart" id="chart-eventperson"></div>
            </div>
        </div>
</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/chart-nowcar.js"></script>
<script src="js/chart-7daycar.js"></script>
<script src="js/chart-6monthcar.js"></script>
<script src="js/chart-maxcar.js"></script>
<script src="js/chart-yearpeople.js"></script>
<script src="js/chart-peoplechange.js"></script>
<script src="js/chart-sexpeople.js"></script>
<script src="js/chart-sexperson.js"></script>
<script src="js/chart-dirverperson.js"></script>
<script src="js/chart-agepeople.js"></script>
<script src="js/chart-ageperson.js"></script>
<script src="js/chart-countrypeople.js"></script>
<script src="js/chart-citypeople.js"></script>
<script src="js/chart-culturepeople.js"></script>
<script src="js/chart-jobpeople.js"></script>
<script src="js/chart-yearperson.js"></script>
<script src="js/chart-changeperson.js"></script>
<script src="js/chart-prisonperson.js"></script>
<script src="js/chart-foreignperson.js"></script>
<script src="js/chart-eventperson.js"></script>

<script type="text/javascript" src="js/lib/raphael-min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="data/c3706.js"></script>
<script type="text/javascript">
    $(function(){
        // 默认
        $('#Map').SVGMap({
            mapName: 'c3706',
            mapWidth: 400,
            mapHeight: 300,
            showName: true
        });
    });
</script>
</html>

json格式如下:

[{
  "name": "烟台市",
  "data": [30000, 60009, 90005, 140005, 180002, 210005,311111]
}
]
只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言