echarts、higncharts折线图或柱状图只需要后端传到前端一段json数据，接送数据的x轴与y周有对应数据，折线图或柱状图就会渲染出这数据。

比如，x轴表示美每天日期，y轴表示数量。他们的数据都在数据库里存着。如下图：

它们的数据存放数据库中，x轴为每周的周一，并且代表当前周的违规次数或人数。由于3月25日到3月31日那周和4月8日到4月14日那周都没人违规，所以数据库中并没有这两周的任何数据，所以后端从数据库拿到数据并传到前端，渲染出来的图就如上两图了。

若要那两周就算没数据也想展示到图里面，如下两张图：

解决办法如下：

后端：

  1. #!/usr/bin/python
  2. # -*- coding: utf-8 -*-
  3. import web
  4. import json
  5. import time
  6. import datetime
  7. from common.util.login_required import login_required
  8. from common.config.DatabaseConfig import mysql_db
  9.  
  10. #
  11. urls = (
  12.     "/visualviolationno***", "VisualViolat***",  # 可视化页面
  13.     "/visualviolationno***", "VisualViolat***",  # 柱状图1数据处理
  14.     "/visualviolationno***", "VisualViolat***",  # 折线图2数据处理
  15.     "/visualviolationno***", "VisualViolat***",  # 饼状图3数据处理
  16.     "/visualviolationno***", "VisualViolat***",  # 柱状图4数据处理
  17. )
  18.  
  19. render = web.template.render('templates')
  20. app = web.application(urls, globals())
  21.  
  22. # 可视化页面
  23. class VisualViolationNotification(object):
  24.     def GET(self):
  25.         render = web.template.render('templates')
  26.         return render.violationnotification()
  27.  
  28. # 柱状图1数据处理
  29. class VisualViolationNot***(object):
  30.     def GET(self):
  31.         data_web = web.input()
  32.         data_name = data_web.i1.encode("gbk")
  33.         date_min = data_web.get('i2')
  34.         date_max = data_web.get('i3')
  35.         if len(date_min) == 7 and len(date_max) == 7:
  36.  
  37.             sql = "select count(*) count,division from week_violation where substring(date_min,1,7) <= '" + date_max + "' and substring(date_min,1,7) >= '" + date_min + "' group by division"
  38.         else:
  39.             sql = "select count(*) count,division from week_violation where date_min >= '" + date_min + "' and date_max <= '" + date_max + "'  group by division"
  40.  
  41.         ret = mysql_db.query(sql)
  42.         ret = list(ret)
  43.         list_out = []
  44.         list_count = []
  45.         list_division = []
  46.         for i in ret:
  47.             count = i.get("count")
  48.             list_count.append(count)
  49.             division = i.get("division")
  50.             list_division.append(division)
  51.         list_out.append(list_division)
  52.         list_out.append(list_count)
  53.         return json.dumps(list_out)
  54.  
  55. # 折线图2数据处理
  56. class VisualViolationNotificationData2(object):
  57.     def GET(self):
  58.         data_web = web.input()
  59.         data_name = data_web.i1.encode("gbk")
  60.         date_min = data_web.get('i2')
  61.         date_max = data_web.get('i3')
  62.         if len(date_min) == 7 and len(date_max) == 7:
  63.             flag = '月'
  64.             sql = "select count(*) count,month_min date_min from week_violation where substring(date_min,1,7) <= '" + date_max + "' and substring(date_min,1,7) >= '" + date_min + "' group by month_min"
  65.             ret = mysql_db.query(sql)
  66.             ret = list(ret)
  67.             list1 = []
  68.             total_x = []
  69.             total_y = []
  70.             for tot in ret:
  71.                 total_x.append(str(tot.get("date_min")))
  72.                 total_y.append(tot.get("count"))
  73.             list1.append(total_x)
  74.             list1.append(total_y)
  75.             list1.append(flag)
  76.             list1 = json.dumps(list1)
  77.  
  78.         else:
  79.             flag = '周'
  80.             sql = "select count(*) count,date_min from week_violation where date_min >= '" + date_min + "' and date_max <= '" + date_max + "' group by date_min"
  81.             ret = mysql_db.query(sql)
  82.             ret = list(ret)
  83.             list1 = []
  84.             total_x = []
  85.             total_y = []
  86.             for tot in ret:
  87.                 total_x.append(str(tot.get("date_min")))
  88.                 total_y.append(tot.get("count"))
  89.             list1.append(total_x)
  90.             list1.append(total_y)
  91.             list1.append(flag)
  92.  
  93.             date_min = date_min.encode("utf-8")
  94.             date_min = datetime.datetime.strptime(date_min, "%Y-%m-%d")
  95.             date_max = datetime.datetime.strptime(date_max, "%Y-%m-%d")
  96.  
  97.             work = workDays(date_min, date_max)
  98.             ret = list(work.workDays())
  99.             l1 = []
  100.             for i in range(len(ret)):
  101.                 if i % 2 == 0:
  102.                     l1.append(ret[i].strftime("%Y-%m-%d"))
  103.  
  104.             for i in l1:
  105.                 if i not in list1[0]:
  106.                     list1[1].insert(l1.index(i), 0)
  107.             list1[0] = l1
  108.             list1 = json.dumps(list1)
  109.  
  110.         return list1
  111.  
  112. # 饼状图3数据处理
  113. class VisualViolationNotificationData3(object):
  114.     def GET(self):
  115.         data_web = web.input()
  116.         data_name = data_web.i1.encode("gbk")
  117.         date_min = data_web.get('i2')
  118.         date_max = data_web.get('i3')
  119.         if len(date_min) == 7 and len(date_max) == 7:
  120.             sql = "select count(*) count,division from week_violation where substring(date_min,1,7) <= '" + date_max + "' and substring(date_min,1,7) >= '" + date_min + "' group by division"
  121.  
  122.         else:
  123.             sql = "select count(*) count,division from week_violation where date_min >= '" + date_min + "' and date_max <= '" + date_max + "' group by division"
  124.  
  125.         ret = mysql_db.query(sql)
  126.         ret = list(ret)
  127.  
  128.         list1 = []
  129.         for i in ret:
  130.             dict = {}
  131.             dict['y'] = i.get("count")
  132.             dict['name'] = i.get("division")
  133.             list1.append(dict)
  134.         return json.dumps(list1)
  135.  
  136. # 柱状图4数据处理
  137. class VisualViolationNotificationData4(object):
  138.     def GET(self):
  139.  
  140.         data_web = web.input()
  141.         data_name = data_web.i1.encode("gbk")
  142.         #date_min = data_web.i2.encode("gbk")
  143.         #date_max = data_web.i3.encode("gbk")
  144.         date_min = data_web.get('i2')
  145.         date_max = data_web.get('i3')
  146.  
  147.         if len(date_min) == 7 and len(date_max) == 7:
  148.             flag = '月'
  149.             sql = "select count(distinct num) count,month_min date_min from week_violation where substring(date_min,1,7) <= '" + date_max + "' and substring(date_min,1,7) >= '" + date_min + "' group by month_min"
  150.             with mysql_db.transaction():
  151.                 ret = mysql_db.query(sql)
  152.             ret = list(ret)
  153.             list_out = []
  154.             list_count = []
  155.             list_division = []
  156.             for i in ret:
  157.                 count = i.get("count")
  158.                 list_count.append(count)
  159.                 date_min = i.get("date_min")
  160.                 list_division.append(str(date_min))
  161.  
  162.             list_out.append(list_division)
  163.             list_out.append(list_count)
  164.             list_out.append(flag)
  165.         else:
  166.             flag = '周'
  167.             sql = "select count(distinct num) count,date_min from week_violation where date_min >= '" +date_min + "' and date_max <= '" + date_max + "' group by date_min"
  168.             with mysql_db.transaction():
  169.                 ret = mysql_db.query(sql)
  170.             ret = list(ret)
  171.             list_out = []
  172.             list_count = []
  173.             list_division = []
  174.             for i in ret:
  175.                 count = i.get("count")
  176.                 list_count.append(count)
  177.                 date_min1 = i.get("date_min")
  178.                 list_division.append(str(date_min1))
  179.  
  180.             list_out.append(list_division)
  181.             list_out.append(list_count)
  182.             list_out.append(flag)
  183.  
  184.             date_min = date_min.encode("utf-8")
  185.             date_min = datetime.datetime.strptime(date_min, "%Y-%m-%d")
  186.             date_max = datetime.datetime.strptime(date_max, "%Y-%m-%d")
  187.  
  188.             work = workDays(date_min, date_max)
  189.             ret = list(work.workDays())
  190.             l1 = []
  191.             for i in range(len(ret)):
  192.                 if i % 2 == 0:
  193.                     l1.append(ret[i].strftime("%Y-%m-%d"))
  194.             for i in l1:
  195.                 if i not in list_out[0]:
  196.                     list_out[1].insert(l1.index(i), 0)
  197.             list_out[0] = l1
  198.  
  199.         return json.dumps(list_out)
  200.  
  201. # 计算两个日期之间的周
  202. class workDays():
  203.     def __init__(self, start_date, end_date, days_off=None):
  204.         """days_off:休息日,默认周六日, 以0(星期一)开始,到6(星期天)结束, 传入tupple
  205.         没有包含法定节假日,
  206.         """
  207.         self.start_date = start_date
  208.         self.end_date = end_date
  209.         self.days_off = days_off
  210.         if self.start_date > self.end_date:
  211.             self.start_date, self.end_date = self.end_date, self.start_date
  212.         if days_off is None:
  213.             self.days_off = 1,2,3,4,5
  214.         # 每周工作日列表
  215.         self.days_work = [x for x in range(7) if x not in self.days_off]
  216.  
  217.     def workDays(self):
  218.         """实现工作日的 iter, 从start_date 到 end_date , 如果在工作日内,yield 日期
  219.         """
  220.         # 还没排除法定节假日
  221.         tag_date = self.start_date
  222.         while True:
  223.             if tag_date > self.end_date:
  224.                 break
  225.             if tag_date.weekday() in self.days_work:
  226.                 yield tag_date
  227.             tag_date += datetime.timedelta(days=1)
  228.  
  229.     def daysCount(self):
  230.         """工作日统计,返回数字"""
  231.         return len(list(self.workDays()))
  232.  
  233.     def weeksCount(self, day_start=0):
  234.         """统计所有跨越的周数,返回数字
  235.         默认周从星期一开始计算
  236.         """
  237.         day_nextweek = self.start_date
  238.         while True:
  239.             if day_nextweek.weekday() == day_start:
  240.                 break
  241.             day_nextweek += datetime.timedelta(days=1)
  242.         # 区间在一周内
  243.         if day_nextweek > self.end_date:
  244.             return 1
  245.         weeks = ((self.end_date - day_nextweek).days + 1) / 7
  246.         weeks = int(weeks)
  247.         if ((self.end_date - day_nextweek).days + 1) % 7:
  248.             weeks += 1
  249.         if self.start_date < day_nextweek:
  250.             weeks += 1
  251.         return weeks
  252. #
  253. # date_min = datetime.datetime(2019,1,7)
  254. # date_max = datetime.datetime(2019,2,18)
  255. #
  256. # work = workDays(date_min,date_max)
  257. #
  258. # ret = list(work.workDays())
  259. # # print ret
  260. # l1 = []
  261. # l2 = []
  262. # for i in range(len(ret)):
  263. #     if i % 2 == 0:
  264. #         l1.append(ret[i].strftime("%Y-%m-%d"))
  265. #
  266. # b = ['2019-01-07', '2019-01-21', '2019-01-28', '2019-02-11']
  267. # c = [1,2,3,4]
  268. # print b
  269. # print l1
  270. # for i in l1:
  271. #     if i not in b:
  272. #         c.insert(l1.index(i),0)
  273. # print c

前端

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="renderer" content="webkit|ie-comp|ie-stand">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="viewport"
  8.           content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  9.     <meta http-equiv="Cache-Control" content="no-siteapp"/>
  10.     <!--[if lt IE 9]>
  11.     <script type="text/javascript" src="../static/ui/lib/html5shiv.js"></script>
  12.     <script type="text/javascript" src="../static/ui/lib/respond.min.js"></script>
  13.     <![endif]-->
  14.     <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui/css/H-ui.min.css"/>
  15.     <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui.admin/css/H-ui.admin.css"/>
  16.     <link rel="stylesheet" type="text/css" href="../static/ui/lib/Hui-iconfont/1.0.8/iconfont.css"/>
  17.     <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui.admin/skin/default/skin.css" id="skin"/>
  18.     <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui.admin/css/style.css"/>
  19.     <!--[if IE 6]>
  20.     <script type="text/javascript" src="../static/ui/lib/DD_belatedPNG_0.0.8a-min.js"></script>
  21.     <script>DD_belatedPNG.fix('*');</script>
  22.     <![endif]-->
  23.     <title></title>
  24. </head>
  25. <body>
  26.  
  27. <div>
  28. <span class="" id="month" style="margin-left: 500px; margin-top: 20px;">
  29.     日期范围
  30.     <input type="text" id="datemin" class="Wdate startTime input-text" name="startTime" style="width:120px;"
  31.            value="2018-01"
  32.            onfocus="WdatePicker({dateFmt:'yyyy-MM',isShowClear:false,isShowToday:false,isShowOK:false,readOnly:true,maxDate:'#F{$$dp.$$D(\'datemax\')}',onpicked:pickedSdate})"/>
  33.     -
  34.     <input type="text" id="datemax" class="Wdate endTime input-text" name="endTime" style="width:120px;"
  35.            value="2018-12"
  36.            onfocus="WdatePicker({dateFmt:'yyyy-MM',isShowClear:false,isShowToday:false,isShowOK:false,readOnly:true,minDate:'#F{$$dp.$$D(\'datemin\')}',startDate:'#F{$$dp.$$D(\'datemin\',{d:+1})}',onpicked:pickedSdate})"/>
  37.     <span id="data-name" class="hide"></span>
  38.  
  39.     <button type="button" class="btn btn-success radius" id="tijiao" name=""><i class="Hui-iconfont"></i> 搜索
  40.     </button>
  41. </span>
  42.  
  43.     <span class="text-c hide" id="week" style="margin-left: 500px; margin-top: 20px;">
  44.        日期范围
  45.         <input type="text"
  46.                onfocus="WdatePicker({ maxDate:'#F{$$dp.$$D(\'datemax1\')||\'%y-%M-%d\'}',disabledDays:[0,2,3,4,5,6]})"
  47.                id="datemin1"
  48.                class="input-text Wdate" style="width:120px;">
  49.         -
  50.         <input type="text"
  51.                onfocus="WdatePicker({ minDate:'#F{$$dp.$$D(\'datemin1\')}',maxDate:'%y-%M-%d',disabledDays:[1,2,3,4,5,6]})"
  52.                id="datemax1"
  53.                class="input-text Wdate" style="width:120px;">
  54.  
  55.         <button type="button" class="btn btn-success radius" id="tijiao1" name=""><i class="Hui-iconfont"></i> 搜索
  56.         </button>
  57. </span>
  58.  
  59.     <span style="margin-top: 20px;">
  60.     <button id="flag" value="month"></button>
  61.     <a href="javascript: void month()" id="button_month" class="">
  62.     <button class="btn btn-success radius" type="button">月查询</button></a>
  63.         <a href="javascript: void week()" id="button_week" class="hide">
  64.     <button class="btn btn-success radius" type="button">周查询</button></a>
  65. </span>
  66.  
  67. </div>
  68. <!--视图-->
  69. <div class="page-container">
  70.     <div id="container1" style="width: 50%; float: left"></div>
  71.     <div id="container2" style="width: 50%; float: left;"></div>
  72.     <div id="container3" style="width: 50%; float: left;"></div>
  73.     <div id="container4" style="width: 50%; float: left;"></div>
  74. </div>
  75. <!--_footer 作为公共模版分离出去-->
  76. <script type="text/javascript" src="../static/ui/lib/jquery/1.9.1/jquery.min.js"></script>
  77. <script type="text/javascript" src="../static/ui/lib/layer/2.4/layer.js"></script>
  78. <script type="text/javascript" src="../static/ui/static/h-ui/js/H-ui.min.js"></script>
  79. <script type="text/javascript" src="../static/ui/static/h-ui.admin/js/H-ui.admin.js"></script>
  80. <!--/_footer 作为公共模版分离出去-->
  81.  
  82. <!--请在下方写此页面业务相关的脚本-->
  83. <script type="text/javascript" src="../static/ui/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
  84. <script type="text/javascript" src="../static/ui/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
  85. <script type="text/javascript" src="../static/ui/lib/hcharts/Highcharts/5.0.6/js/highcharts-3d.js"></script>
  86. <script type="text/javascript" src="../static/ui/lib/My97DatePicker/4.8/WdatePicker.js"></script>
  87. <script type="text/javascript" src="../static/ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
  88. <script type="text/javascript" src="../static/ui/lib/jquery.contextmenu/jquery.contextmenu.r2.js"></script>
  89. <script type="text/javascript" src="../static/ui/lib/laypage/1.2/laypage.js"></script>
  90. <script type="text/javascript">
  91.  
  92.     function month() {
  93.         $$("#month").toggleClass("hide");
  94.         $$("#week").toggleClass("hide");
  95.         $$("#button_month").toggleClass("hide");
  96.         $$("#button_week").toggleClass("hide");
  97.         $$("#flag").val("week");
  98.     }
  99.  
  100.     function week() {
  101.         $$("#month").toggleClass("hide");
  102.         $$("#week").toggleClass("hide");
  103.         $$("#button_month").toggleClass("hide");
  104.         $$("#button_week").toggleClass("hide");
  105.         $$("#flag").val("month");
  106.     }
  107.  
  108.     // 只让日期插件显示年和月份
  109.     $$(function () {
  110.         //日期显示当月
  111.         (function () {
  112.             var date = new Date();
  113.             date.setMonth(date.getMonth() - 6);
  114.             var date_zero = date.toLocaleDateString().split("/");
  115.             console.log(date_zero);
  116.             var mydate_min = (date_zero[0] < 10 ? "0" + date_zero[0] : date_zero[0]).toString() + "-" + (date_zero[1] < 10 ? "0" + date_zero[1] : date_zero[1]).toString();
  117.  
  118.             date.setMonth(date.getMonth() + 5);
  119.             var date_none = date.toLocaleDateString().split("/");
  120.             var mydate_max = (date_none[0] < 10 ? "0" + date_none[0] : date_none[0]).toString() + "-" + (date_none[1] < 10 ? "0" + date_none[1] : date_none[1]).toString();
  121.             console.log(mydate_max);
  122.  
  123.             // var year_min = "2018";
  124.             // var year_max = "2018";
  125.             // // var month = date.getMonth() + 1;
  126.             // var month_min = "1";
  127.             // var month_max = "12";
  128.             // month_min = (month_min < 10 ? "0" + month_min : month_min);
  129.             // month_max = (month_max < 10 ? "0" + month_max : month_max);
  130.             // var mydate_min = (year_min.toString() + '-' + month_min.toString());
  131.             // var mydate_max = (year_max.toString() + '-' + month_max.toString());
  132.             $$('.startTime').val(mydate_min);
  133.             $$('.endTime').val(mydate_max);
  134.  
  135.             // 当前库的名称
  136.             var data_name = "******";
  137.  
  138.             // 处罚搜索框时间
  139.             $$('#tijiao').click(function () {
  140.  
  141.                 // 重新加载
  142.                 func1();
  143.  
  144.             });
  145.             // 处罚搜索框时间
  146.             $$('#tijiao1').click(function () {
  147.  
  148.                 // 重新加载
  149.                 func1();
  150.  
  151.             });
  152.  
  153.             // 视图函数
  154.             $$(
  155.                 func1()
  156.             );
  157.  
  158.             function func1() {
  159.                 // 获取当前日期搜索框日期
  160.                 var data_min = $$("#datemin").val();
  161.                 var data_max = $$("#datemax").val();
  162.  
  163.                 if ($$("#flag").val() == "month") {
  164.                     data_min = $$("#datemin").val();
  165.                     data_max = $$("#datemax").val();
  166.  
  167.                 }
  168.  
  169.                 if ($$("#flag").val() == "week") {
  170.                     data_min = $$("#datemin1").val();
  171.                     data_max = $$("#datemax1").val();
  172.                 }
  173.  
  174.                 // 次数-部门 柱状图
  175.                 $$.ajax({
  176.                     url: "***",
  177.                     type: "GET",
  178.                     data: {"i1": data_name, "i2": data_min, "i3": data_max},
  179.                     success: function (data) {
  180.                         var data = JSON.parse(data);
  181.                         var data_x = data[0];
  182.                         var data_y = data[1];
  183.                         // Set up the chart
  184.                         $$('#container1').highcharts({
  185.                             chart: {
  186.                                 type: 'column'
  187.                             },
  188.                             title: {
  189.                                 text: data_min + '至' + data_max + ' 各部门违规人次'
  190.                             },
  191.                             subtitle: {
  192.                                 text: '人次/部门'
  193.                             },
  194.                             xAxis: {
  195.                                 categories: data_x
  196.                             },
  197.                             yAxis: {
  198.                                 min: 0,
  199.                                 title: {
  200.                                     text: '违规人次'
  201.                                 }
  202.                             },
  203.                             tooltip: {
  204.                                 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  205.                                 pointFormat: '<tr><td style="color:{series.color};padding:0">共有</td>' +
  206.                                     '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
  207.                                 footerFormat: '</table>',
  208.                                 shared: true,
  209.                                 useHTML: true
  210.                             },
  211.                             plotOptions: {
  212.                                 column: {
  213.                                     pointPadding: 0.2,
  214.                                     borderWidth: 0,
  215.                                     dataLabels: {enabled: true}
  216.                                 }
  217.                             },
  218.                             series: [{
  219.                                 name: '各部门',
  220.                                 data: data_y
  221.  
  222.                             }]
  223.                         });
  224.  
  225.                     }
  226.                 });
  227.  
  228.                 // 次数-部门 饼状图
  229.                 $$.ajax({
  230.                     url: "***",
  231.                     type: "GET",
  232.                     data: {"i1": data_name, "i2": data_min, "i3": data_max},
  233.                     success: function (data) {
  234.                         var data = JSON.parse(data);
  235.                         $$('#container2').highcharts({
  236.                             chart: {
  237.                                 plotBackgroundColor: null,
  238.                                 plotBorderWidth: null,
  239.                                 plotShadow: false
  240.                             },
  241.                             title: {
  242.                                 text: data_min + '至' + data_max + ' 各部门违规人次占比'
  243.                             },
  244.                             tooltip: {
  245.                                 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  246.                             },
  247.                             plotOptions: {
  248.                                 pie: {
  249.                                     allowPointSelect: true,
  250.                                     cursor: 'pointer',
  251.                                     dataLabels: {
  252.                                         enabled: true,
  253.                                         color: '#000000',
  254.                                         connectorColor: '#000000',
  255.                                         format: '<b>{point.name}</b>: {point.percentage:.1f} %'
  256.                                     }
  257.                                 }
  258.                             },
  259.                             series: [{
  260.                                 type: 'pie',
  261.                                 name: '占比',
  262.                                 data: data
  263.                             }]
  264.                         });
  265.  
  266.                     }
  267.                 });
  268.  
  269.                 // 次数-月份 折线图
  270.                 $$.ajax({
  271.                     url: "***",
  272.                     type: "GET",
  273.                     data: {"i1": data_name, "i2": data_min, "i3": data_max},
  274.                     success: function (data) {
  275.                         var data = JSON.parse(data);
  276.                         var data_x = data[0];
  277.                         var data_y = data[1];
  278.                         var date_type = data[2];
  279.                         $$('#container3').highcharts({
  280.                             chart: {
  281.                                 zoomType: 'xy',
  282.                                 spacingRight: 20
  283.                             },
  284.                             title: {
  285.                                 text: data_min + '至' + data_max + ' 各个' + date_type + '违规人次'
  286.                             },
  287.                             subtitle: {
  288.                                 text: document.ontouchstart === undefined ?
  289.                                     '人次/' + date_type :
  290.                                     '人次/' + date_type
  291.                             },
  292.                             xAxis: {
  293.                                 type: 'linear',
  294.                                 categories: data_x,
  295.                                 title: {
  296.                                     text: '各' + date_type
  297.                                 }
  298.                             },
  299.                             yAxis: {
  300.                                 title: {
  301.                                     text: '违规人次'
  302.                                 }
  303.                             },
  304.                             tooltip: {
  305.                                 shared: true
  306.                             },
  307.                             legend: {
  308.                                 enabled: false,
  309.                                 align: 'center',
  310.                                 verticalAlign: 'middle'
  311.                             },
  312.                             plotOptions: {
  313.                                 line: {
  314.                                     dataLabels: {
  315.                                         enabled: true
  316.                                     }
  317.                                 },
  318.                                 area: {
  319.                                     fillColor: {
  320.                                         linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
  321.                                         stops: [
  322.                                             [0, Highcharts.getOptions().colors[0]],
  323.                                             [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
  324.                                         ]
  325.                                     },
  326.                                     lineWidth: 1,
  327.                                     marker: {
  328.                                         enabled: false
  329.                                     },
  330.                                     shadow: false,
  331.                                     states: {
  332.                                         hover: {
  333.                                             lineWidth: 1
  334.                                         }
  335.                                     },
  336.                                     threshold: null
  337.                                 },
  338.  
  339.                             },
  340.                             series: [{
  341.                                 name: "人次",
  342.                                 data: data_y
  343.                             }]
  344.                         });
  345.                     }
  346.                 });
  347.  
  348.                 // 人数-月份 柱状
  349.                 $$.ajax({
  350.                     url: "***",
  351.                     type: "GET",
  352.                     data: {"i1": data_name, "i2": data_min, "i3": data_max},
  353.                     success: function (data) {
  354.                         var data = JSON.parse(data);
  355.                         var data_x = data[0];
  356.                         var data_y = data[1];
  357.                         var date_type = data[2];
  358.  
  359.                         // Set up the chart
  360.                         $$('#container4').highcharts({
  361.                             chart: {
  362.                                 type: 'column'
  363.                             },
  364.                             title: {
  365.                                 text: data_min + '至' + data_max + ' 各个' + date_type + '违规人数'
  366.                             },
  367.                             subtitle: {
  368.                                 text: '人数/' + date_type
  369.                             },
  370.                             xAxis: {
  371.                                 categories: data_x
  372.                             },
  373.                             yAxis: {
  374.                                 min: 0,
  375.                                 title: {
  376.                                     text: '违规人数'
  377.                                 }
  378.                             },
  379.                             tooltip: {
  380.                                 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  381.                                 pointFormat: '<tr><td style="color:{series.color};padding:0">本' + date_type + '共</td>' +
  382.                                     '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
  383.                                 footerFormat: '</table>',
  384.                                 shared: true,
  385.                                 useHTML: true
  386.                             },
  387.                             plotOptions: {
  388.                                 column: {
  389.                                     pointPadding: 0.2,
  390.                                     borderWidth: 0,
  391.                                     dataLabels: {enabled: true}
  392.                                 }
  393.                             },
  394.                             series: [{
  395.                                 name: '各' + date_type,
  396.                                 data: data_y
  397.  
  398.                             }]
  399.                         });
  400.  
  401.                     }
  402.                 });
  403.  
  404.             }
  405.         })();
  406.     });
  407.  
  408.     //获取选中的值
  409.     function pickedSdate() {
  410.         var _val = this.value,
  411.             _name = this.name;
  412.         if (_name == 'startTime') {
  413.             $$('.sTime').text(_val);
  414.         } else if (_name == 'endTime') {
  415.             $$('.eTime').text(_val);
  416.         }
  417.         //执行统一搜索
  418.     }
  419.  
  420. </script>
  421. </body>
  422. </html>

注意：以上后端使用web.py框架和前端使用H-ui框架，认真看并不难

数据库类型如下：

  1. id      名字    账户           违规内容             所属周周一        所属周周日           部门             所属月份
    1540    张*    ******    内勤请假登陆堡垒机         2019-02-25       2019-03-03        核心系统开发部      2019-02
    1541    李*    ******    堡垒机违规操作            2019-03-11       2019-03-17        核心系统开发部      2019-03

echarts、higncharts折线图或柱状图显示数据为0的点的更多相关文章

  1. Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例

    ​  目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...

  2. excel在一个图表内，显示折线图和柱状图

      折线图和柱状图,在同一个图表中拆分显示   一个图,设置主坐标轴 另外一个图,设置次坐标轴     拆分,通过调整纵坐标的最小值和最大值来实现     关于图表的标题,选中图表,选择布局,然后图表 ...

  3. Echarts line折线图使用(vue)

    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...

  4. DevExpress 折线图和柱状图的绘制与数据绑定

    DevExpress 组件是一个非常丰富和强大的组件,适合各种可视化图形的绘制与展示,在数据分析展示中是个很有帮助的,网上也有很多关于这方面的文章,关于折线图或柱状图的画法,以下是自己在工作中接触到的 ...

  5. MATLAB之折线图、柱状图、饼图以及常用绘图技巧

    MATLAB之折线图.柱状图.饼图以及常用绘图技巧 一.折线图 参考代码: %图1:各模式直接成本预测 %table0-table1为1*9的数组,记录关键数据 table0 = data_modol ...

  6. ECharts绘制折线图

    首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...

  7. OpenGL（十七） 绘制折线图、柱状图、饼图

    一.绘制折线图 glutBitmapCharacter(GLUT_BITMAP_8_BY_13,label[j])函数可以绘制GLUT位图字符,第一个参数是GLUT中指定的特定字形集,第二个参数是要写 ...

  8. 解决echarts饼图不显示数据为0的数据

    如图所示 饼图数据为0但是还是会显示lableline和lable 解决方法 var echartData = [{ value: data_arry[0]==0?null:data_arry[0], ...

  9. 图表echarts折线图，柱状图，饼状图

    总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...

随机推荐

  1. Dubbo+Nacos做注册中心和配置中心

    项目结构 相关代码 EchoService public interface EchoService { String echo(String msg); } DefaultEchoService @ ...

  2. 51nod 2513

    写代码的时候抄错变量,晕! 另外有个while循环条件错的,因为两个指针必须都要有终止条件 代码: #include<iostream> #include<cstdio> #i ...

  3. 【原创】大数据基础之Kudu（3）primary key

    关于kudu的primary key The primary key may not be changed after the table is created. You must drop and ...

  4. SQLAlchemy使用(三)搭配Flask框架使用

    前言 本章应该是SQLAlchemy使用系列的最后一篇了,本章简单讲一下如何搭配Flask使用.下一篇应该是写Flask_restful相关内容了 正文 我们简单使用前两章的model,两张表 # - ...

  5. python正则表达式--split、sub、escape方法

    1.re.split 语法: re.split(pattern, string[, maxsplit=0, flags=0]) 参数: pattern    匹配的正则表达式 string      ...

  6. java类(Class)的概念；对象的概念，声明类的属性 和方法，局部变量和成员变量，面向对象编程思维,抽象的概念

    类(Class)的概念 类是对一组具有相同特征和行为的对象的抽象描述. 理解: [1] 类包含了两个要素:特性和行为 => 同一类事物具有相同的特征和行为. [2] 类是一个群体性概念.例如:网 ...

  7. 【mysql】 快速搞定数据库迁移

    工具:navicat for mysql

  8. Jenkins编辑或替换All view

    为什么我不能编辑“All”view? 这是因为它的类型是“All”而不是“List”,并且“All”类型是不可编辑的.你只能有一个“All”类型的view. 如果你想编辑这个View,你将不得不创建一 ...

  9. Asp.Net Core 使用Swashbuckle.AspNetCore 生成API文档

    详情参考:https://www.cnblogs.com/morang/p/9741511.html github地址:https://github.com/yimogit/moxy.blogs/tr ...

  10. ubuntu制作离线包

    一.应用场景a.当我们需要在多台电脑安装同一个软件,并且这个软件很大,下载需要很长时间b.需要安装软件的ubuntu不能上网二.离线安装包的制作2.1.通过如下指令下载XXXX软件所需要的deb包,首 ...