图表标题，颜色，显示数值，实现Y轴数据保留小数点后两位

麦小丫.m

已于 2023-05-06 16:00:17 修改

阅读量439

点赞数

文章标签： java 开发语言

于 2023-05-06 15:44:34 首次发布

本文链接：https://blog.csdn.net/DCS06050606/article/details/130528713

版权

该代码段展示了如何利用jQuery引入layDate插件选择日期时间，然后通过Ajax发送GET请求到指定URL获取数据。数据包含电流和电压信息，进一步处理后，用于生成展示电压的柱状图，柱状图上方显示数据值并进行了颜色和字体大小的定制。

摘要由CSDN通过智能技术生成

//引入
<script src="./js/jquery-3.6.4.min.js"></script>
<script src="../layDate-v5.3.1/layDate-v5.3.1/laydate/laydate.js"></script>
<style href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" ></style>
//----------------------------------------------------------------------------
<input type="text" id="riqi">
    <button  onclick="riqi2()" style="color:purple;">查询</button>

两行，两列

<div class="container">
        <div class="row">
        <div class="col-xs-6 col-md-6"><div id="main" style=" height:400px; width: 400px;"></div></div>
        <div class="col-xs-6 col-md-6"><div id="main01" style=" height:400px; width: 400px;"></div></div>
        <div class="row"></div>
        <div class="col-md-6 col-md-6"><div id="main02" style=" height:400px; width: 400px;"></div></div> 
        
        </div>
        </div>

 laydate.render({
         elem: '#riqi'
         ,type:'datetime'
       });
       function riqi2()
 // axaj异步请求
let t =  $('#riqi').val()
           $.ajax({
               url:"http://10.1.10.41:8009/wast",
               type:"get",
              
               data:{time:t},
               success:function(res){
                 
                       console.log(res)
                       console.log(res.电流A)
                       console.log(res.电能)
                       let sa = res.电流B
                       let b =sa.toFixed(2) //保留两位小数
                       console.log("过滤后",b)
                       console.log(res.电压B.toFixed(2)) //保留两位小数

//--------------------------------------------------------
option01 = {
  title:{       //标题 title
    left:'left', // 对齐方式 left center right
    itemGap:20,
    text:'电压'},
//-------------------------------------------------------
    color: ['#d88273','#d88273', '#d88273'], //修改颜色
//------------------------------------------------------
  xAxis: {
    type: 'category',
    data: [ 'A电压', 'B电压', 'C电压']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [res.电压A.toFixed(2), res.电压B.toFixed(2), res.电压C.toFixed(2) ],
//-----------------------------------------------------------------------------
      itemStyle:{   //柱形图上方显示数据
        normal:{
            label:{
                show:true,
                position:'top',
                textsyle:{
                    color:'black',
                    fontSize:16
//------------------------------------------------------------------------------
                }
            }
        }
    },
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};