基本信息
源码名称：js实现报表统计折线图扇形图
源码大小：0.21M
文件格式：.zip
开发语言：js
更新时间：2019-11-15
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
js实现报表统计折线图扇形图
<!DOCTYPE html> <html class="no-focus" lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>网站 | 总览统计</title> <meta name="description" content=""> <meta name="author" content="caiweiming"> <meta name="robots" content="noindex, nofollow"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=0"> <link rel="stylesheet" href="graph/bootstrap.min.css"> <link rel="stylesheet" href="graph/oneui.css"> <link rel="stylesheet" href="graph/custom.css"> <link rel="stylesheet" href="graph/farm.css"> <link rel="stylesheet" href="graph/layer.css" id="layuicss-skinlayercss"> <style type="text/css"> @-webkit-keyframes chartjs-render-animation { from { opacity: 0.99 } to { opacity: 1 } } @keyframes chartjs-render-animation { from { opacity: 0.99 } to { opacity: 1 } } .chartjs-render-monitor { -webkit-animation: chartjs-render-animation 0.001s; animation: chartjs-render-animation 0.001s; } body { background-color: #fff; } </style> </head> <body style=""> <!--<div id="page-container" class="sidebar-l sidebar-o side-scroll header-navbar-fixed " style="padding-top: 0;margin-top: 0;padding-left: 0">--> <section id="page-body-container" class="wider"> <main id="main-container" style="min-height: 894px;padding: 0;"> <section id="main-body-wrapper" class=""> <div class="content" style="padding: 0;margin: 0"> <link rel="stylesheet" href="graph/farm.css"> <div class="box" style="border: 0"> <!--数据统计--> <div class="head"> <!--用户--> <div class="yyhead head_user"> <p> <a href="#">419</a> </p> <p>今日活跃用户数</p> </div> <!--商品数--> <div class="yyhead head_shop"> <p> <a href="#">8</a> </p> <p>今日阅读文章用户数</p> </div> <!--交易额--> <div class="yyhead head_deal"> <p> <a href="#">2</a> </p> <p>今日参加评估用户数</p> </div> <!--待发货--> <div class="yyhead head_shipped"> <p> <a href="#">2301</a> </p> <p>当前总用户数</p> </div> <div class="yyhead head_ten"> <p> <a href="#">105</a> </p> <p>参与总用户数</p> </div> </div> <!--数据走势--> <div class="data"> <p>最近7日</p> <!--数据折线图--> <div style="width:66%;" class="wrapper"> <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"> <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div> </div> <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div> </div> </div> <canvas id="canvas" height="353" width="1079" class="chartjs-render-monitor" style="display: block; width: 1079px; height: 353px;"></canvas> </div> <!--环形图--> <div class="txt">患者情况</div> <div id="canvas-holder" style="width:30%"> <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"> <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div> </div> <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div> </div> </div> <canvas id="chart-area" width="502" height="251" class="chartjs-render-monitor" style="display: block; width: 502px; height: 251px;"></canvas> <p><i>总患者</i><span id="totalOrder">236</span></p> </div> </div> <!--土地认养统计--> <div class="count"> <div class="com land"> <div>申请统计</div> <div> <p> <a href="https://yimudingzhi.kejianet.cn/public/admin.php/farm/planted/index.html">13</a> </p><i></i>申请中 </div> <div> <p> <a href="https://yimudingzhi.kejianet.cn/public/admin.php/farm/planted/index.html">0</a> </p><a href="https://yimudingzhi.kejianet.cn/public/admin.php/farm/planted/index.html"> </a><i></i>已完成 </div> </div> <div class="com adopt"> <div>用药统计</div> <div> <p><a href="#">1</a> </p><i></i>用药中 </div> <div> <p> <a href="#">8</a> </p> <i></i>用药完成 </div> </div> <div class="com land"> <div>保障统计</div> <div> <p> <a href="https://yimudingzhi.kejianet.cn/public/admin.php/farm/planted/index.html">13</a> </p><i></i>保障中 </div> <div> <p> <a href="https://yimudingzhi.kejianet.cn/public/admin.php/farm/planted/index.html">0</a> </p><a href="https://yimudingzhi.kejianet.cn/public/admin.php/farm/planted/index.html"> </a><i></i>保障完成 </div> </div> <div class="com adopt"> <div>理赔统计</div> <div> <p><a href="#">1</a> </p><i></i>理赔中 </div> <div> <p> <a href="#">8</a> </p> <i></i>理赔完成 </div> </div> </div> </div> </div> </section> </main> <footer id="page-footer" class="content-mini content-mini-full font-s12 bg-gray-lighter clearfix"> <div class="pull-right"> Crafted with <i class="fa fa-heart text-city"></i> by ylj</a> </div> <div class="pull-left"> <a class="font-w600" href="#" target="_blank">派来帮 </a> © <span class="js-year-copy">2019-08</span> </div> </footer> </section> <!--</div>--> <script src="graph/jquery.min.js"></script> <script> jQuery(function () { App.initHelpers(['appear', 'slimscroll', 'magnific-popup', 'table-tools']); }); </script> <!--折线图--> <script src="graph/Chart.bundle.js"></script> <script src="graph/utils.js"></script> <script src="graph/yuanx.js"></script> <script> function getInitData() { return new Promise((resolve, reject) => { // var json2 = { // "day":["03-01","03-02","03-03","03-04","03-05","03-06","03-07"], // "sevenData":{ // "shopTotal":["0.00","0.00","0.00","0.00","0.00","0.00","0.00"], // "landTotal":["0.00","0.00","0.00","0.00","0.00","0.00","0.00"], // "animalTotal":["0.00","0.00","0.00","0.00","0.00","0.00","0.00"] // }, // "max":0, // "min":0 // }; var json = { "day": ["08-16", "08-17", "08-18", "08-19", "08-20", "08-21", "08-22"], "sevenData": { "shopTotal": ["0.00", "0.00", "0.00", "0.00", "0.00", "31.50", "0.00"], "landTotal": ["0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00"], "animalTotal": ["0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00"] }, "min": 0, "max": 0 }; resolve(json); }) } function getChartData() { return new Promise((resolve, reject) => { var json = {"orderTotal": 236, "daiOrder": 64, "shouOrder": 14, "successOrder": 13, "lipeiOrder": 1}; resolve(json); }) } getInitData().then((result) => { var config = { type: 'line', data: { labels: result['day'], // datasets: [{ // label: '认养交易额', // backgroundColor: window.chartColor.red, // borderColor: window.chartColor.red, // data: result['sevenData']['animalTotal'], // fill: false, // }, { // label: '种植交易额', // fill: false, // backgroundColor: window.chartColor.blue, // borderColor: window.chartColor.blue, // data: result['sevenData']['landTotal'], // }, datasets: [ { label: '今日活跃用户', fill: false, backgroundColor: window.chartColor.yellow, borderColor: window.chartColor.yellow, data: result['sevenData']['shopTotal'] }] }, options: { responsive: true, title: { display: true, }, scales: { yAxes: [{ ticks: { suggestedMin: result.max, suggestedMax: result.min } }] } } }; // window.onload = function() { // var ctx = document.getElementById('canvas').getContext('2d'); // window.myLine = new Chart(ctx, config); // }; var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); }).then(() => { }) getChartData().then((result) => { $("#totalOrder").html(result['orderTotal']); var ctx = document.getElementById("chart-area").getContext('2d'); var myDoughnut = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ data: [result['successOrder'], result['shouOrder'], result['daiOrder'], result['lipeiOrder']], backgroundColor: [ window.chartColors.red, window.chartColors.orange, window.chartColors.yellow, window.chartColors.blue, ], label: 'Dataset 1' }], labels: [ '我要申请', '用药治疗', '随访保障', '我要理赔', ] }, options: { responsive: true, legend: { position: 'right', }, title: { display: true, }, animation: { animateScale: true, animateRotate: true } } }); }).then(() => { }) </script> </body> </html>