给echarts添加筛选时间控件时，控件不显示，并设置数据库无数据时echarts模块显示暂无数据

最新推荐文章于 2023-09-06 11:21:31 发布

原创最新推荐文章于 2023-09-06 11:21:31 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts柱状图 #提示暂无数据 #选项卡切换 #时间控件

本文介绍如何在ECharts中正确使用时间控件，避免被画布遮挡导致失效的问题。同时，探讨了当从后台获取数据为空时，如何通过切换div显示暂无数据提示，确保用户体验。代码示例展示了如何结合Ajax请求动态更新图表。

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

给echarts模块添加时间控件时，控件无效，经检查发现，控件被画布遮盖了，需要用一个form标签包括时间控件，否则时间控件不生效。另外，如果echarts从后台获取到的数据为空，需要提示暂无信息。这时，需要使用一个div，在有数据时显示echarts，在无数据时显示暂无数据。

HTML：

#chart7, #chart8 {
height: 300px;
}

#chart7_, #chart8_ {
   height: 300px;
   display: none;
   padding-top: 136px;
   font-size: 20px;
   text-align: center;
}

.panel-title {
text-align: center;
}
</style>

</div>
</div>

var myChart7 = echarts.init(document.getElementById('chart7'));
var myChart8 = echarts.init(document.getElementById('chart8'));

var option7 = {
           tooltip: {
               trigger: 'axis',
               axisPointer: { // 坐标轴指示器，坐标轴触发有效
                   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
               }
           },
           grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           xAxis: [
               {
                   type: 'category',
                   data:[],
                   axisTick: {
                       alignWithLabel: true
                   },
                   //设置字体倾斜
                   axisLabel: {
                       interval:0,
                       rotate:40
                       }
               }
           ],
           yAxis: [
               {
                   type: 'value',
                   name: '单位：人'
               }
           ],
           series: [
               {
                   name: '养老',
                   type: 'bar',
                   // barWidth: '30%',
                   data: []
               }
           ]
       };
       var option8 = {
           tooltip: {
               trigger: 'axis',
               axisPointer: { // 坐标轴指示器，坐标轴触发有效
                   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
               }
           },
           grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           xAxis: [
               {
                   type: 'category',
                   data: [],
                   axisTick: {
                       alignWithLabel: true
                   },
                   axisLabel: {
                       interval:0,
                       rotate:40
                       }
               }
           ],
           yAxis: [
               {
                   type: 'value',
                   name: '单位：人'
               }
           ],
           series: [
               {
                   name: '医保',
                   type: 'bar',
                   // barWidth: '30%',
                   data: []
               }
           ]
       };

myChart7.setOption(option7);
   myChart8.setOption(option8);
   myChart7.showLoading();
   myChart8.showLoading();

  $('a[href="#yl_4"]').on('shown.bs.tab', function (e) {
       e.preventDefault();
       myChart7.resize();
       myChart8.resize();
   });
   $('a[href="#yb_4"]').on('shown.bs.tab', function (e) {
       e.preventDefault();
       myChart7.resize();
       myChart8.resize();
   });