内审进度图表样式及报错修复

src/views/system/jbdScan/goods/neishenzhuangtai.vue

@@ -69,7 +69,7 @@
                 style="width: 90%; margin: 0 auto"
               >
                 <!-- <el-table-column type="index"  width="30" align="center"/> -->
-                <el-table-column type="index" width="40" :align="center">
+                <el-table-column type="index" width="40" align="center">
                   <template slot-scope="scope">
                     <span>{{ scope.$index + 1 }} </span>
                   </template>
@@ -136,7 +136,7 @@
                 </el-table-column>
               </el-table>
             </div>
-            <div class="table-echarts">
+            <div class="table-echarts" ref="tableecharts1">
               <div class="in-echarts">
                 <div>不符合项条款统计</div>
                 <div id="in-echarts" />
@@ -206,7 +206,7 @@
                 />
               </el-table>
             </div>
-            <div class="table-echarts">
+            <div class="table-echarts" ref="tableecharts2">
               <div class="in-echarts">
                 <div>CMA不符合项条款统计</div>
                 <div id="in-CMAecharts" />
@@ -647,13 +647,15 @@ export default {
     // cnas指定数据到坐标轴的映射
     getLoadEchartsTwo() {
       var chartDom = document.getElementById('in-echarts')
+      let fw = this.$refs.tableecharts1.clientWidth
+      let fh = this.$refs.tableecharts1.clientHeight
       let width, height
       if (window.innerWidth > 1600) {
-        width = 720
-        height = 450
+        width = (fw/2).toFixed(2)
+        height = fh
       } else {
-        width = 570
-        height = 400
+        width = (fw/2).toFixed(2)
+        height = fh
       }
       const setEchartWH = {
         // 设置控制图表大小变量
@@ -671,7 +673,8 @@ export default {
         grid: {
           // 让图表占满容器
           top: '50px',
-          left: '0',
+          left: '10px',
+          bottom: '10px',
           containLabel: true
         },
         xAxis: {
@@ -751,10 +754,12 @@ export default {
     // cma指定数据到坐标轴的映射
     getLoadCmaEchartsX() {
       var chartDom = document.getElementById('in-CMAecharts')
+      let fw = this.$refs.tableecharts2.clientWidth
+      let fh = this.$refs.tableecharts2.clientHeight
       const setEchartWH = {
         // 设置控制图表大小变量
-        width: 400,
-        height: 300
+        width: (fw/2).toFixed(2),
+        height: fh
       }
 
       var myChart = echarts.init(chartDom, null, setEchartWH)
@@ -767,9 +772,9 @@ export default {
         grid: {
           // 让图表占满容器
           top: '40px',
-          left: '0px',
+          left: '10px',
           right: '40px',
-          bottom: '40px'
+          bottom: '10px'
         },
         xAxis: {
           name: '不符合项',
@@ -813,18 +818,20 @@ export default {
     // cnas部门饼图
     getLoadEchartsthree() {
       var chartDom = document.getElementById('department')
+      let fw = this.$refs.tableecharts1.clientWidth
+      let fh = this.$refs.tableecharts1.clientHeight
       let radius, width, height, padding, center
       if (window.innerWidth > 1600) {
         center = ['60%', '50%']
         radius = '55%'
-        width = 590
-        height = 450
+        width = (fw/2).toFixed(2)
+        height =fh
         padding = [16, 0, 0, 0]
       } else {
         center = ['53%', '50%']
         radius = '42%'
-        width = 500
-        height = 400
+        width = (fw/2).toFixed(2)
+        height = fh
         padding = [16, 0, 0, 0]
       }
       // const center = window.innerWidth > 1600 ? "55%" : "42%";
@@ -879,10 +886,12 @@ export default {
     // cma部门饼图
     getLoadCmaEcharts() {
       var chartDom = document.getElementById('cma-department')
+      let fw = this.$refs.tableecharts2.clientWidth
+      let fh = this.$refs.tableecharts2.clientHeight
       const setEchartWH = {
         // 设置控制图表大小变量
-        width: 400,
-        height: 300
+        width: (fw/2).toFixed(2),
+        height: fh
       }
 
       var myChart = echarts.init(chartDom, null, setEchartWH)