echarts图表自适应

app/view/tender/detail.ejs

@@ -332,7 +332,7 @@
                                 <div class="card mb-3 bg-dark text-white bottom-height">
                                     <% if (hadMap) { %>
                                         <div class="card-header">
-                                            <ul class="nav nav-tabs card-header-tabs panel-card-tabs">
+                                            <ul class="nav nav-tabs card-header-tabs panel-card-tabs" id="change-echarts">
                                                 <li class="nav-item">
                                                     <a class="nav-link active" data-toggle="tab" href="#qijindubiao" role="tab" aria-selected="true">期进度表</a>
                                                 </li>
@@ -347,7 +347,7 @@
                                                     <div id="chartContainer4" class="bottom-height-two" style="width: 100%;"></div>
                                                 </div>
                                                 <div class="tab-pane" id="yuejindbiao" >
-                                                    <div id="chartContainer3" class="bottom-height-two" style="width: 800px;"></div>
+                                                    <div id="chartContainer3" class="bottom-height-two" style="width: 100%;"></div>
                                                 </div>
                                             </div>
                                         </div>
@@ -440,8 +440,8 @@
     myChart.setOption(option);
     //计量完成概况 结束//
     //计量支付概况//
-    var myChart = echarts.init(document.getElementById('jlchart2'), 'dark');
-    var option = {
+    var myChart1 = echarts.init(document.getElementById('jlchart2'), 'dark');
+    var option1 = {
         backgroundColor: '#343a40 ',
         tooltip: {
             trigger: 'axis',
@@ -498,11 +498,11 @@
     };
 
     // 为echarts对象加载数据
-    myChart.setOption(option);
+    myChart1.setOption(option1);
     //计量支付概况 结束//
     //章节计量情况图//
-    var myChart = echarts.init(document.getElementById('jlchart3'), 'dark');
-    var option = {
+    var myChart2 = echarts.init(document.getElementById('jlchart3'), 'dark');
+    var option2 = {
         color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(255,255,225,0.7)'],
         backgroundColor: '#343a40 ',
         tooltip: {
@@ -575,11 +575,11 @@
     };
 
     // 为echarts对象加载数据
-    myChart.setOption(option);
+    myChart2.setOption(option2);
 
     //4 标段期数计量进度//
-    var myChart = echarts.init(document.getElementById('chartContainer4'), 'dark');
-    var option = {
+    var myChart3 = echarts.init(document.getElementById('chartContainer4'), 'dark');
+    var option3 = {
         color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(204,73,80,0.7)','rgba(58,207,221,0.7)','rgba(255,255,225,0.7)'],
         backgroundColor: '#343a40 ',
         title : {
@@ -731,12 +731,12 @@
     };
 
     // 为echarts对象加载数据
-    myChart.setOption(option);
+    myChart3.setOption(option3);
     //4 标段期数计量进度//
     //3 标段月进度//
     // 基于准备好的dom，初始化echarts图表
-    var myChart = echarts.init(document.getElementById('chartContainer3'), 'dark');
-    var option = {
+    var myChart4 = echarts.init(document.getElementById('chartContainer3'), 'dark');
+    var option4 = {
         color:["#17a2b8","#28a745"],
         backgroundColor: '#343a40 ',
         title : {
@@ -889,12 +889,12 @@
         ]
     };
     // 为echarts对象加载数据
-    myChart.setOption(option);
+    myChart4.setOption(option4);
     //3 标段月进度//
 
     //变更审批进度//
-    var myChart = echarts.init(document.getElementById('bgchart'), 'dark');
-    var option = {
+    var myChart5 = echarts.init(document.getElementById('bgchart'), 'dark');
+    var option5 = {
         color: ['rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(255,255,225,0.7)'],
         backgroundColor: '#343a40 ',
         tooltip: {
@@ -962,7 +962,38 @@
     };
 
     // 为echarts对象加载数据
-    myChart.setOption(option);
+    myChart5.setOption(option5);
+
+    function echartsReset() {
+        // myChart.clear();
+        // myChart1.clear();
+        // myChart2.clear();
+        // myChart3.clear();
+        // myChart4.clear();
+        // myChart5.clear();
+        // myChart.setOption(option);
+        // myChart1.setOption(option1);
+        // myChart2.setOption(option2);
+        // myChart3.setOption(option3);
+        // myChart4.setOption(option4);
+        // myChart5.setOption(option5);
+        myChart.resize();
+        myChart1.resize();
+        myChart2.resize();
+        myChart3.resize();
+        myChart4.resize();
+        myChart5.resize();
+    }
+
+    $(function () {
+        $('#change-echarts a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
+            console.log('hello');
+            myChart3.resize();
+            myChart4.resize();
+        });
+    })
+
+    $(window).resize(echartsReset);
 </script>
 <script>
     const tenderId = parseInt('<%- tender.id %>');