layui-tab加载echarts宽度丢失

王焜棟琦

已于 2024-02-18 13:48:58 修改

阅读量400

点赞数 1

于 2024-02-18 13:44:31 首次发布

本文链接：https://blog.csdn.net/u011511086/article/details/136150498

版权

layui 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

文章讲述了如何在HTML和JavaScript中利用layui和ECharts库，动态创建并展示硫磺固体和液体的出入库曲线图，通过AJAX获取数据并在用户交互下切换图表显示。

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

主要是设置div的样式为：width:100%;height:100%;display: block;

<style>
 
    .layui-tab-item
    {
        width:100%;height:480px;
    }
</style>
       <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
          <ul class="layui-tab-title">
              <li class="layui-this">硫磺固体出入库</li>
              <li  onclick="clickYeti()">硫磺液体出入库</li>
          </ul>
          <div class="layui-tab-content">
              <div class="layui-tab-item layui-show" style="">
                  <!--  固体硫磺 出入库，曲线图  -->
                  <div id="sufulrSolidChart" style="width:100%;height:100%;display: block; " lay-ignore></div>
              </div>
              <div class="layui-tab-item" style="">
                  <!-- 硫磺液体出入库，曲线图  -->
                  <div id="liquidSufulrChart" style=" width:100%;height:100%;display: block; " lay-ignore></div>
              </div>

          </div>
      </div>

  <script src="~/echarts/echarts.min.js"></script>
  <script type="text/javascript">

              var pageConfig = {
                  urls: { 
                      //  固体硫磺曲线图
                        sulfur: "/Home/SulftDataByDay"

                      //液体硫磺曲线图
                      , sulfurLiquid: "/Home/LiquitSulftDataByDay"
                  }
              };


      layui.use(['laydate','form'], function () {
                  var $ = layui.$
                      , form = layui.form
                      , laydate = layui.laydate;
                  // 渲染
                  laydate.render({
                      elem: '#start'
                  });
                  laydate.render({
                      elem: '#end'
                  });
 
      });
      !function () {

          //固体硫磺曲线
          function loadDataSulfur() {
              var start = $("#start").val();
              var end = $("#end").val();
              $.ajax({
                  url: pageConfig.urls.sulfur,
                  type: "post",
                  data: {
                      start: start, end: end
                  },
                  success: function (r) {
                      suflurByDayLines(r.inData, r.outData);
                  }
              });
          }

          //固体硫磺每天出库、入库，
          function suflurByDayLines(inData, outData) {
        
              //document.getElementById('sufulrSolidChart').removeAttribute("_echarts_instance_");
              var chartDom = document.getElementById('sufulrSolidChart');
              var myChart = echarts.init(chartDom);
              var option = {
                  //grid: {
                  //    width: '1000px' //设置宽度为父容器宽度的90%
                  //},
                  //  width: containerWidth+"px", //设置宽度为父容器宽度的90%
                  //width:'1000px',
                  title: {
                      text: '固体硫磺每天出库、入库(吨)'
                  },
                  tooltip: {
                      trigger: 'axis'
                  },
                  xAxis: {
                      type: 'category',
                      nameLocation: 'middle'
                  },
                  yAxis: {
                      name: '硫磺库存数量'
                  },
                  series: [
                      {
                          name: '硫磺出库',
                          type: 'line',
                          data: outData,
                          showSymbol: false,
                      },
                      {
                          name: '硫磺入库',
                          type: 'line',
                          data: inData,
                          showSymbol: false,
                      }
                  ]
              };
              myChart.setOption(option);
          }

          //液体硫磺，每天出入库
          function suflurLiquidByDayLines(inData2, outData2) {
              //$("#liquidSufulrChart").html("");
              //解决echarts 无法渲染问题
              document.getElementById('liquidSufulrChart').removeAttribute("_echarts_instance_");
              var chartDom2 = document.getElementById('liquidSufulrChart');
              var myChart2 = echarts.init(chartDom2);

              console.log(778, '------------');
              console.log(inData2);
              console.log(outData2);

              var option = {
                  title: {
                      text: '液体硫磺每天出库、入库(吨)'
                  },
                  tooltip: {
                      trigger: 'axis'
                  },
                  xAxis: {
                      type: 'category',
                      nameLocation: 'middle'
                  },
                  yAxis: {
                      name: '硫磺库存数量'
                  },
                  series: [
                      {
                          name: '硫磺出库',
                          type: 'line',
                          data: outData2,
                          showSymbol: false,
                      },
                      {
                          name: '硫磺入库',
                          type: 'line',
                          data: inData2,
                          showSymbol: false,
                      }
                  ]
              };
              myChart2.setOption(option);
          }

          //液体硫磺
          function loadLiquidSulfur() {
              var start = $("#start").val();
              var end = $("#end").val();
              $.ajax({
                  url: pageConfig.urls.sulfurLiquid,
                  type: "post",
                  data: {
                      start: start, end: end
                  },
                  success: function (r) {
                      suflurLiquidByDayLines(r.inData, r.outData);
                  }
              });
          }

          loadDataSulfur();

          //点击查询
          window.loadChart = function () {
              //液体硫磺，是否隐藏
              var isHide = $("#liquidSufulrChart").is(":hidden");
              if (isHide) {
                  loadDataSulfur();
              } else {
                  loadLiquidSulfur();
              }
          }

          //点击液体硫磺，
          var isClickedYeti = false;
          window.clickYeti = function () {
              if (isClickedYeti == false) {
                  loadLiquidSulfur();
              }
              isClickedYeti = true;
          }

      }();
  </script>