统计模块统计图表样式调整

src/views/tj/compoent/BarData.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="dom" style="width:100% ;height:300px;">
+  <div ref="dom" style="width:calc(100% - 0px);height:300px;">
   </div>
 
 </template>
@@ -183,7 +183,8 @@ export default {
 
       })
 
-      myChart.setOption(option)
+      myChart.setOption(option);
+      myChart.resize();
       /*window.addEventListener("resize", myChart.resize);*/
 
       //  })

src/views/tj/compoent/BarDobuleData.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="dom" style="width:800px ;height:300px;">
+  <div ref="dom" style="width:calc(100% - 0px);height:300px;">
   </div>
 
 </template>
@@ -74,7 +74,27 @@ export default {
             },
             axisLabel: {
               interval: 0,
-              rotate: 20
+              // rotate: 20
+              formatter:function(value){
+                let str = ''
+                let num = 3; //每行显示字数
+                let valLength = value.length; //该项x轴字数
+                let rowNum = Math.ceil(valLength / num); // 行数
+
+                if(rowNum > 1) {
+                  for(let i = 0; i < rowNum; i++) {
+                    let temp = "";
+                    let start = i * num;
+                    let end = start + num;
+
+                    temp = value.substring(start, end) + "\n";
+                    str += temp;
+                  }
+                  return str;
+                } else {
+                  return value;
+                }
+              }
             }
           }
         ],
@@ -167,7 +187,8 @@ export default {
       myChart.on('click', (params) => {
         _this.$emit('visible', {xzqh: params.name,sfsb:"3"});
       })
-      myChart.setOption(option)
+      myChart.setOption(option);
+      myChart.resize();
       /*window.addEventListener("resize", myChart.resize);*/
 
       //  })

src/views/tj/compoent/BarTdsjyt.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="dom" style="width:100% ;height:300px;">
+  <div ref="dom" style="width:calc(100% - 0px);height:300px;">
   </div>
 
 </template>
@@ -96,7 +96,27 @@ export default {
             },
             axisLabel: {
               interval: 0,
-              rotate: 20,
+              // rotate: 20,
+              formatter:function(value){
+                let str = ''
+                let num = 3; //每行显示字数
+                let valLength = value.length; //该项x轴字数
+                let rowNum = Math.ceil(valLength / num); // 行数
+
+                if(rowNum > 1) {
+                  for(let i = 0; i < rowNum; i++) {
+                    let temp = "";
+                    let start = i * num;
+                    let end = start + num;
+
+                    temp = value.substring(start, end) + "\n";
+                    str += temp;
+                  }
+                  return str;
+                } else {
+                  return value;
+                }
+              }
             }
           }
         ],
@@ -165,7 +185,8 @@ export default {
 
         }
       })
-      myChart.setOption(option)
+      myChart.setOption(option);
+      myChart.resize();
 
     }
   },

src/views/tj/compoent/DoughnutData.vue

@@ -96,10 +96,10 @@ export default {
             },
             label: {
               normal : {
-                formatter: '{b}:({d}%)',
+                formatter: '{b}\n({d}%)',
                 textStyle : {
                   fontWeight : 'normal',
-                  fontSize : 14
+                  fontSize : 13
                 }
               },
               show: false,
@@ -121,7 +121,8 @@ export default {
 
       }
       // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option)
+      myChart.setOption(option);
+      myChart.resize();
     }
   }
 }

src/views/tj/compoent/PieData.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="main" style="width:400px ;height:300px;"></div>
+  <div ref="main" style="width:calc(100% - 0px) ;height:300px;"></div>
 </template>
 
 <script>
@@ -63,6 +63,7 @@ export default {
         //图例
         legend: {//图例  标注各种颜色代表的模块
           // orient: 'vertical',//图例的显示方式  默认横向显示
+          type:'scroll', //图例滚动效果
           bottom: 10,//控制图例出现的距离  默认左上角
 
           // itemWidth: 16,//图例颜色块的宽度和高度
@@ -74,21 +75,21 @@ export default {
           data: ['出让', '划拨', '作价出资','转让','其他']//图例上显示的饼图各模块上的名字
         },
         //饼图中各模块的颜色
-        color: ['#367bec', '#FDD56A', '#FD866A', '#9E87FF', '#867EFE'],
+        color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
         // 饼图数据
         series: {
           // name: 'bug分布',
           type: 'pie',             //echarts图的类型   pie代表饼图
-          radius: '60%',           //饼图中饼状部分的大小所占整个父元素的百分比
+          radius: '50%',           //饼图中饼状部分的大小所占整个父元素的百分比
           center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
           // data:''               //饼图数据
           data: this.resultData,
           label:{
             normal : {
-              formatter: '{b}:({d}%)',
+              formatter: '{b}:\n({d}%)',
               textStyle : {
                 fontWeight : 'normal',
-                fontSize : 14
+                fontSize : 13
               }
             }
           },
@@ -107,7 +108,9 @@ export default {
 
       }
         // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(option)
+        myChart.setOption(option);
+      myChart.resize();
+
     }
   }
 }

src/views/tj/compoent/PieQdfsMj.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="main" style="width:400px ;height:300px;"></div>
+  <div ref="main" style="width:calc(100% - 0px);height:300px;"></div>
 </template>
 
 <script>
@@ -64,28 +64,28 @@ export default {
         legend: {//图例  标注各种颜色代表的模块
           // orient: 'vertical',//图例的显示方式  默认横向显示
           bottom: 10,//控制图例出现的距离  默认左上角
-
+          type:'scroll', //图例滚动效果
           // itemWidth: 16,//图例颜色块的宽度和高度
           // itemHeight: 12,
           textStyle: {//图例中文字的样式
             color: '#000',
-            fontSize: 14
+            fontSize: 13
           },
           data: ['出让', '划拨', '作价出资','转让','其他']//图例上显示的饼图各模块上的名字
         },
         //饼图中各模块的颜色
-        color: ['#0065BA', '#028BFF', '#12CBF6','#6dec6e','#5DB7D2'],
+        color: ['#7eacea', '#e15777', '#95ea71', '#ea9b4f', '#7577df', '#be72d8', '#fff'],
         // 饼图数据
         series: {
           // name: 'bug分布',
           type: 'pie',             //echarts图的类型   pie代表饼图
-          radius: '60%',           //饼图中饼状部分的大小所占整个父元素的百分比
+          radius: '50%',           //饼图中饼状部分的大小所占整个父元素的百分比
           center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
           // data:''               //饼图数据
           data: this.resultData,
           label:{
             normal : {
-              formatter: '{b}:({d}%)',
+              formatter: '{b}\n({d}%)',
               textStyle : {
                 fontWeight : 'normal',
                 fontSize : 14
@@ -107,7 +107,8 @@ export default {
 
       }
       // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option)
+      myChart.setOption(option);
+      myChart.resize();
     }
   }
 }

src/views/tj/sjtjModules.vue

@@ -23,7 +23,7 @@
                 <div style="color: white;padding-top: 0.6rem">
                   <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">已审核省属企业数量</div>
                   <div style="font-size: 24px; margin-top:6%;float: right;font-weight:600;">{{ SSQYSL }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">家</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span></div>
                   <!--                  <div style="font-size: 24px; float: right;font-weight:600;">{{ SUMSZ }}<span style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400" >亩</span></div>-->
                 </div>
               </div>
@@ -33,7 +33,7 @@
                 <div style="color: white;padding-top: 0.6rem">
                   <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">上报地块企业数量</div>
                   <div style="font-size: 24px;margin-top:6%; float: right;font-weight:600;">{{ SBDKQYSL }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">家</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span></div>
                 </div>
 
 
@@ -50,9 +50,9 @@
                 <div style="color: white;padding-top: 0.6rem">
                   <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">已审核省属企业地块</div>
                   <div style="font-size: 24px; float: right;font-weight:600;">{{ COUNTDK }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">块</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span></div>
                   <div style="font-size: 24px; float: right;font-weight:600;">{{ SUMSS }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">亩</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span></div>
                 </div>
                 <!--                <div>其中省直单位闲置低效面积</div>-->
                 <!--                <div>-->
@@ -65,9 +65,9 @@
                 <div style="color: white;padding-top: 0.6rem">
                   <div style="width: 8rem;margin-left: 1rem;margin-top:10px;float: left; ">其中省属企业闲置低效地块</div>
                   <div style="font-size: 24px; float: right;font-weight:600;">{{ COUNTDKBYSSXZDX }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">块</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span></div>
                   <div style="font-size: 24px; float: right;font-weight:600;">{{ SUMSSXZDX }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">亩</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span></div>
                 </div>
                 <!--              <div style="color: white;padding-top: 1rem">-->
                 <!--                <div>其中省属企业闲置低效面积</div>-->
@@ -86,7 +86,7 @@
                 <div style="color: white;padding-top: 0.6rem">
                   <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">已审核省直单位数量</div>
                   <div style="font-size: 24px; margin-top:6%; float: right;font-weight:600;">{{ SZQYSL }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">家</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span></div>
                 </div>
               </div>
             </a-col>
@@ -95,7 +95,7 @@
                 <div style="color: white;padding-top: 0.6rem">
                   <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">上报地块单位数量</div>
                   <div style="font-size: 24px; margin-top:6%; float: right;font-weight:600;">{{ SSDWSL }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">家</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span></div>
                 </div>
 
 
@@ -113,9 +113,9 @@
 
                   <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">已审核省直单位地块</div>
                   <div style="font-size: 24px; float: right;font-weight:600;">{{ COUNTDKBYSZ }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">块</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span></div>
                   <div style="font-size: 24px; float: right;font-weight:600;">{{ SUMSZ }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">亩</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span></div>
 
                 </div>
                 <!--                <div>其中省直单位闲置低效面积</div>-->
@@ -129,9 +129,9 @@
                 <div style="color: white;padding-top: 0.6rem">
                   <div style="width: 8rem;margin-left: 1rem;margin-top:10px;float: left; ">其中省直单位闲置低效地块</div>
                   <div style="font-size: 24px; float: right;font-weight:600;">{{ COUNTDKBYSZXZDX }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">块</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span></div>
                   <div style="font-size: 24px; float: right;font-weight:600;">{{ SUMSZXZDX }}<span
-                    style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">亩</span></div>
+                    style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span></div>
                 </div>
                 <!--              <div style="color: white;padding-top: 1rem">-->
                 <!--                <div>其中省属企业闲置低效面积</div>-->
@@ -401,7 +401,7 @@ export default {
       tem_xzqhmc: "",
       paramSz: "",
       resData2: [],
-      color: ['#42A4EB', '#F79A3E'],
+      color: ['#00e4ff', '#8E42FF', '#FF6B6B', '#FF9B42', '#F0D418', '#2E64FF'],
       color1: ['#ff8c37', '#a181fc','#fd6f97','#389af4'],
       resData1:
         [                  //每个模块的名字和值