时间段柱状图变化_时段产量柱状-CSDN博客

本文链接：https://blog.csdn.net/qq_43676606/article/details/98875520

这篇博客主要介绍了如何使用JS动态展示时间段柱状图，包括处理从后台接口获取的数据，使用if...else进行条件判断，通过URL传递参数，以及处理时间选择和日期格式。同时，文章提到了CSS中文字自动换行、JQuery操作等技巧，并给出了相关资源链接供进一步学习。

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

最终效果：
在这里插入图片描述

代码：

<style>
    html{
        touch-action:none;
    }
    button, .aui-btn {
        background-color: #06a7e2;
        color: white;
    }
  .weui-cells{
      margin-top: 40px;
  }
    .obj{
        padding-left: 10px;
        line-height: 30px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        background-color: #EEEEEE;
    }
    #selectTime{
        width: 150px;
        border: none;
        border-left: 4px solid #06a7e2;
        padding-left: 5px;
    }
    .data_select{
        display: inline;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
    }
    #selectTimes{
         width: 120px;
        border: none;
        padding-right: 5px;
    }
    #main{
        width: 100%;
        height: 230px;
    }
#dosubmit{
    margin: 15px;
}
</style>
<!--if{$_GET['act'] === 'machine'}-->
<div id="top">
    <div id="back"  onclick="history.back()"><i class="iconfont icon-fanhui"></i></div>
    <div id="title">设备选择</div>
</div>
<div class="weui-cells weui-cells_checkbox"></div>
<a href="javascript:;" id="dosubmit" class="weui-btn weui-btn_mini weui-btn_primary">完成</a>
<!--{else}-->
<div id="top">
    <a id="back"  href="{url('statistic/index')}"><i class="iconfont icon-fanhui"></i></a>
    <div id="title">设备稼动率分析</div>
</div>
<div id="content">
    <div class="obj">分析对象:{$_GET['machine']}</div>
    <div class="data_select">
        <input class="weui-input select-time" type="text" id="selectTime" value="{$_GET['bgDate']}">
        <input class="weui-input select-time" type="text" id="selectTimes" value="{$_GET['endDate']}">
    </div>
    <div id="main"></div>
    <a href="{url('statistic/compare', ['act'=>'machine'])}" class="weui-btn weui-btn_primary select-machine" style="background-color: #4BA6DD; margin:15px;">选择分析对象</a>
</div>
<!--{/if}-->

<script type="text/javascript">

    $('.select-machine').click(function () {
        var bgDate = $('#selectTime').val(),
            endDate = $('#selectTimes').val();
        $(this).attr('href', '{url("statistic/compare", ["act"=>"machine"])}' + '&bgDate=' + bgDate + '&endDate=' + endDate);
    })

    $('.select-time').datetimePicker({
        onClose:function (e) {
            getChartData()
        }
    })

    function getQueryString(name) {
        var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
        if (result == null || result.length < 1) {
            return "";
        }
        return result[1];
    }

    function getChartData() {
        var bgDate = $('#selectTime').val(),
            endDate = $('#selectTimes').val(),
            machineList = getQueryString("machine");

        var d1 = new Date(bgDate.replace(/-/g, "/"));
        var d2 = new Date(endDate.replace(/-/g, "/"));
        if(d1 >=d2)
        {
            alert("开始时间必须小于结束时间！");
            return false;
        }

        $.post('{url("statistic/com