统计查询页面样式修改

UI2/src/views/tj/compoent/BarData.vue

@@ -39,8 +39,8 @@ export default {
     resultXData: {
       handler(newVal) {
         this.$nextTick(function() {
-          this.resultYData = newVal
-          this.getPie()
+          this.resultYData = newVal;
+          this.getPie();
         })
       },
       deep: true,
@@ -51,13 +51,14 @@ export default {
   methods: {
 
     getPie() {
-      var _this= this;
+      const _this = this
       // 绘制图表
       /* this.$nextTick(() => {*/
-      var option = {
+      //定义数据间隔
+      const option = {
         title: {
           text: this.titleText,
-          x: 'left',              //标题位置
+          x: 'left'              //标题位置
           // textStyle: { //标题内容的样式
           //   color: '#000',
           //   fontStyle: 'normal',
@@ -72,9 +73,9 @@ export default {
           }
         },
         grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
+          left: '2%',
+          right: '1%',
+          bottom: '2%',
           containLabel: true
         },
         xAxis: [
@@ -86,7 +87,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;
+                }
+              }
             }
           }
         ],
@@ -96,31 +117,34 @@ export default {
           // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
           // itemWidth: 10,  // 设置宽度
           // itemHeight: 4, // 设置高度
-          itemGap: 40, // 设置两个legend之间的间距
+          itemGap: 40 // 设置两个legend之间的间距
         },
         yAxis: [
           {
-            type: 'value',
+            type: 'log',
             name: this.dw,
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-              },
+                type: 'dashed'
+              }
             },
             axisLabel: {
               // 轴文字
-              fontSize: 12,
-            },
-          },
+
+            }
+          }
         ],
         series: [
           {
             name: this.seriesName,
             type: 'bar',
-            barWidth: '60%',
+            barWidth: '50%',
             label: {
               show: true,
               position: 'top',
+              textStyle: {
+                fontSize: 9,
+              },
             },
             data: this.resultYData.value,
             itemStyle: {
@@ -129,7 +153,7 @@ export default {
                 color: new echarts.graphic.LinearGradient(
                   0, 0, 0, 1, [{
                     offset: 0,
-                    color: '#00C0FA'
+                    color: '#00C0FA',
                   },
                     {
                       offset: 1,
@@ -139,10 +163,10 @@ export default {
                 )
               }
             }
-          },
-    ]
+          }
+        ]
 
-    }
+      }
 
       // 使用刚指定的配置项和数据显示图表。
       var myChart = echarts.init(this.$refs.dom)

UI2/src/views/tj/compoent/BarDobuleData.vue

@@ -88,7 +88,7 @@ export default {
         },
         yAxis: [
           {
-            type: 'value',
+            type: 'log',
             name: "单位（亩）",
             splitLine: {
               lineStyle: {
@@ -101,7 +101,7 @@ export default {
           {
             name: '实际占用土地面积',
             type: 'bar',
-            barWidth: 20,
+            barWidth: 15,
             symbolSize: 8,
             label: {
               show: true,
@@ -129,7 +129,7 @@ export default {
             name: '闲置低效土地面积',
             type: 'bar',
             symbolSize: 8,
-            barWidth: 20,
+            barWidth: 15,
             label: {
               show: true,
               position: 'top',
@@ -145,7 +145,7 @@ export default {
                   },
                     {
                       offset: 1,
-                      color: '#c631ef'
+                      color: '#42cb7d'
                     }
                   ]
                 )

UI2/src/views/tj/compoent/BarTdsjyt.vue

@@ -100,7 +100,7 @@ export default {
         },
         yAxis: [
           {
-            type: 'value',
+            type: 'log',
             name: this.dw,
             splitLine: {
               lineStyle: {
@@ -117,7 +117,7 @@ export default {
           {
             name: this.seriesName,
             type: 'bar',
-            barWidth: '60%',
+            barWidth: '50%',
             label: {
               show: true,
               position: 'top',

UI2/src/views/tj/sjtjModules.vue

@@ -408,7 +408,6 @@ export default {
     },
     getPieData2() {
       getAction("/qcsb.qyxx/qcQyxx/tdhqfsArea").then(res => {
-        debugger
         if (res.code == 200) {
           this.resData2 = res.result;
         }
@@ -443,7 +442,6 @@ export default {
     getTdsyxzDougatasz() {
       getAction("/qcsb.qyxx/qcQyxx/tdsyxzzb").then(res => {
         if (res.code == 200) {
-          debugger
           this.DoughnutData2 = res.result;
         }
       })