统计查询页面样式修改

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

@@ -86,7 +86,7 @@ export default {
             },
             axisLabel: {
               interval: 0,
-              rotate: 20
+              rotate: 20,
             }
           }
         ],
@@ -102,9 +102,17 @@ export default {
           {
             type: 'value',
             name: this.dw,
-          }
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+              },
+            },
+            axisLabel: {
+              // 轴文字
+              fontSize: 12,
+            },
+          },
         ],
-
         series: [
           {
             name: this.seriesName,
@@ -115,17 +123,23 @@ export default {
               position: 'top',
             },
             data: this.resultYData.value,
-          /*  itemStyle: {
+            itemStyle: {
               normal: {
-                //这里是颜色
-                color: function(params){
-                  var colorList = ['#539cfb', '#fa6053', '#5cd179', '#91c7ae','#749f83', '#ca8622'];
-                  return colorList[params.dataIndex % colorList.length];
-                }
+                barBorderRadius: [10, 10, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#00C0FA'
+                  },
+                    {
+                      offset: 1,
+                      color: '#2F95FA'
+                    }
+                  ]
+                )
               }
-            }*/
+            }
           },
-
     ]
 
     }
@@ -136,6 +150,7 @@ export default {
         _this.$emit('visible',{sjyt:params.data.name});
 
       })
+
       myChart.setOption(option)
       /*window.addEventListener("resize", myChart.resize);*/
 

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

@@ -90,6 +90,11 @@ export default {
           {
             type: 'value',
             name: "单位（亩）",
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+              },
+            },
           }
         ],
         series: [
@@ -102,7 +107,23 @@ export default {
               show: true,
               position: 'top',
             },
-            data: this.resultYData.value
+            data: this.resultYData.value,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [5, 5, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#00C0FA'
+                  },
+                    {
+                      offset: 1,
+                      color: '#c631ef'
+                    }
+                  ]
+                )
+              }
+            }
           },
           {
             name: '闲置低效土地面积',
@@ -113,7 +134,23 @@ export default {
               show: true,
               position: 'top',
             },
-            data: this.resultYData.value2
+            data: this.resultYData.value2,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [5, 5, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#eecc49'
+                  },
+                    {
+                      offset: 1,
+                      color: '#c631ef'
+                    }
+                  ]
+                )
+              }
+            }
           }
         ]
 

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

@@ -0,0 +1,165 @@
+<template>
+  <div ref="dom" style="width:100% ;height:300px;">
+  </div>
+
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+
+export default {
+  name: "BarData",
+  data() {
+    return {
+      a: [],
+      b: [],
+    }
+  },
+  props: {
+    resultXData: {
+
+    },
+    seriesName:{
+      type:String,
+    },
+    titleText: {
+      type: String,
+    },
+    dw: {
+      type: String,
+    },
+  },
+  mounted() {
+    /*setTimeout(() => {
+      this.getPie();
+    }, 1000)*/
+  },
+  watch: {
+    resultXData: {
+      handler(newVal) {
+        this.$nextTick(function() {
+          this.resultYData = newVal
+          this.getPie()
+        })
+      },
+      deep: true,
+      immediate: true
+
+    },
+  },
+  methods: {
+
+    getPie() {
+      var _this= this;
+      // 绘制图表
+      /* this.$nextTick(() => {*/
+      var option = {
+        title: {
+          text: this.titleText,
+          x: 'left',              //标题位置
+          // textStyle: { //标题内容的样式
+          //   color: '#000',
+          //   fontStyle: 'normal',
+          //   fontWeight: 100,
+          //   fontSize: 16 //主题文字字体大小，默认为18px
+          // },
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.resultYData.name,
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLabel: {
+              interval: 0,
+              rotate: 20,
+            }
+          }
+        ],
+        legend: {
+          top: '5%', // 控制 板块控制器的位置
+          right: 'center',
+          // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
+          // itemWidth: 10,  // 设置宽度
+          // itemHeight: 4, // 设置高度
+          itemGap: 40, // 设置两个legend之间的间距
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: this.dw,
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+              },
+            },
+            axisLabel: {
+              // 轴文字
+              fontSize: 12,
+            },
+          },
+        ],
+        series: [
+          {
+            name: this.seriesName,
+            type: 'bar',
+            barWidth: '60%',
+            label: {
+              show: true,
+              position: 'top',
+            },
+            data: this.resultYData.value,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [10, 10, 0, 0],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(1,186,188,1)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(150,214,104,.9)',
+                  },
+                ]),
+              }
+            }
+          },
+        ]
+
+      }
+
+      // 使用刚指定的配置项和数据显示图表。
+      var myChart = echarts.init(this.$refs.dom)
+      myChart.on('click',(params)=>{
+        _this.$emit('visible',{sjyt:params.data.name});
+
+      })
+      myChart.setOption(option)
+      /*window.addEventListener("resize", myChart.resize);*/
+
+      //  })
+
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -74,7 +74,7 @@ export default {
           data: ['出让', '划拨', '作价出资','转让','其他']//图例上显示的饼图各模块上的名字
         },
         //饼图中各模块的颜色
-        color: ['#1ad4cb', '#9d6bdb', '#4676ff','#fea834','#a5B6de',],
+        color: ['#367bec', '#FDD56A', '#FD866A', '#9E87FF', '#867EFE'],
         // 饼图数据
         series: {
           // name: 'bug分布',
@@ -106,11 +106,8 @@ export default {
         }
 
       }
-
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option)
-
-
     }
   }
 }

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

@@ -0,0 +1,118 @@
+<template>
+  <div ref="main" style="width:400px ;height:300px;"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  name: 'index',
+  data() {
+    return {
+
+    }
+  },
+  props:{
+    resultData: {
+      type: Array,
+      default:()=> [
+        { name: '出让', value: 332312.43 },
+        { name: '划拨', value: 573988.58},
+        { name: '作价出资', value: 279083.13 },
+        { name: '转让', value: 2119.85 },
+      ]
+    },
+    titleText:{
+      type:String,
+    }
+  },
+  watch:{
+    resultData(){
+      this.$nextTick(function() {
+        this.getPie()
+      })
+    }
+  },
+  methods: {
+    getPie() {
+      var _this = this
+      // 绘制图表
+      var myChart = echarts.init(this.$refs.main)
+      myChart.on('click',(params)=>{
+        _this.$emit('visible',{syqsyfs:params.data.name});
+        console.log(params)
+      })
+      // 指定图表的配置项和数据
+      var option = {
+        //标题
+        title: {
+          text: this.titleText,
+          x: 'left' ,              //标题位置
+          // textStyle: { //标题内容的样式
+          //   color: '#000',
+          //   fontStyle: 'normal',
+          //   fontWeight: 100,
+          //   fontSize: 16 //主题文字字体大小，默认为18px
+          // },
+        },
+        // stillShowZeroSum: true,
+        //鼠标划过时饼状图上显示的数据
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}:{c} ({d}%)'
+        },
+        //图例
+        legend: {//图例  标注各种颜色代表的模块
+          // orient: 'vertical',//图例的显示方式  默认横向显示
+          bottom: 10,//控制图例出现的距离  默认左上角
+
+          // itemWidth: 16,//图例颜色块的宽度和高度
+          // itemHeight: 12,
+          textStyle: {//图例中文字的样式
+            color: '#000',
+            fontSize: 14
+          },
+          data: ['出让', '划拨', '作价出资','转让','其他']//图例上显示的饼图各模块上的名字
+        },
+        //饼图中各模块的颜色
+        color: ['#0065BA', '#028BFF', '#12CBF6','#6dec6e','#5DB7D2'],
+        // 饼图数据
+        series: {
+          // name: 'bug分布',
+          type: 'pie',             //echarts图的类型   pie代表饼图
+          radius: '60%',           //饼图中饼状部分的大小所占整个父元素的百分比
+          center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
+          // data:''               //饼图数据
+          data: this.resultData,
+          label:{
+            normal : {
+              formatter: '{b}:({d}%)',
+              textStyle : {
+                fontWeight : 'normal',
+                fontSize : 14
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
+                // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
+              },
+              labelLine: {
+                show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
+              }
+            }
+          },
+        }
+
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -96,7 +96,7 @@ export default {
             padding:8,
             borderWidth:1,
             borderColor:'#409eff',
-            backgroundColor:'rgba(255,255,255,0.7)',
+            backgroundColor:'rgba(255,255,255,0.9)',
             formatter: function (params) {
               return params.name + ':' + '</br>' + "地块数量:" + params.value + '块' + '</br>'+"实际占用总面积:"+params.data.value2.toFixed(2)+"亩"
             },
@@ -113,7 +113,7 @@ export default {
             min: 0,
             max: 1500,
             inRange: {
-              color: ['#ccdaeb', '#50afe4', '#308ae3'] // 渐变颜色
+              color: ['#ADD6F1', '#26AEFB', '#0290EB'] // 渐变颜色
             },
             textStyle: {
               color: '#7B93A7'
@@ -223,9 +223,9 @@ export default {
           option.grid.push({
             id: idx,
             width: 15,
-            height: 20,
+            height: 35,
             left: coord[0]-15,
-            top: coord[1] -15,
+            top: coord[1] -30,
             z: 100
           });
           option.series.push({
@@ -241,24 +241,29 @@ export default {
                 show: true,//开启显示
                 position: 'top',//柱形上方
                 textStyle: { //数值样式
-                  color: '#494848'
+                  color: '#8C42A1'
                 }
               }},
             z: 100,
             itemStyle: {
               normal: {
-                color: function(params){
-                  // 柱状图每根柱子颜色
-                  var colorList = ['#3553d5','#ff0404'];//['#fcae91','#fb6a4a','#cb181d'];
-                  return colorList[params.dataIndex];
-                }
+                barBorderRadius: [5, 5, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#FE735A'
+                  },
+                  {
+                      offset: 1,
+                      color: '#f1cb07'
+                    }
+                  ]
+                )
               }
             }
           });
         })
         myChart.setOption(option);
-
-
     },
 
   }

UI2/src/views/tj/sjtjModules.vue

@@ -125,7 +125,7 @@
         </a-col>
         <a-col :sm="24" :md="12" :xl="6">
           <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-            <PieData :resultData="this.resData2" :titleText="this.textBysss"  @visible="visibleInfo"></PieData>
+            <PieQdfsMj :resultData="this.resData2" :titleText="this.textBysss"  @visible="visibleInfo"></PieQdfsMj>
           </a-card>
         </a-col>
         <a-col :sm="24" :md="12" :xl="6">
@@ -153,8 +153,8 @@
                         </a-col>-->
             <a-col :sm="24" :md="12" :xl="24">
               <!--              <a-card style="margin-bottom: 1rem;width:100%;height: 20rem">-->
-              <BarData :titleText=this.BarTitleBysz :result-x-data="this.resYData"   :dw="this.dw2"
-                       :seriesName="'地块数量'"></BarData>
+              <BarTdsjyt :titleText=this.BarTitleBysz :result-x-data="this.resYData"   :dw="this.dw2"
+                       :seriesName="'地块数量'"></BarTdsjyt>
               <!--              </a-card>-->
             </a-col>
           </a-card>
@@ -205,9 +205,11 @@
 
 <script>
 import mapData from "@views/tj/compoent/map3Data";
-import PieData from "@views/tj/compoent/PieData"
+import PieData from "@views/tj/compoent/PieData";
+import PieQdfsMj from "@views/tj/compoent/PieQdfsMj";
 import DoughnutData from "@views/tj/compoent/DoughnutData";
 import BarData from "@views/tj/compoent/BarData";
+import BarTdsjyt from "@views/tj/compoent/BarTdsjyt";
 import BarDobuleData from "@views/tj/compoent/BarDobuleData";
 import WaterWorld from "@views/tj/compoent/WaterWorld";
 import NightingaleCharData from "@views/tj/compoent/NightingaleCharData";
@@ -253,8 +255,8 @@ export default {
       param:"",
       paramSz:"",
       resData2: [],
-      color: ['#4676ff', '#1ad4cb'],
-      color1: ['#8c42a1', '#4fa5e7'],
+      color: ['#42A4EB', '#F79A3E'],
+      color1: ['#F36F8A', '#5F71D2'],
       resData1:
         [                  //每个模块的名字和值
 
@@ -282,6 +284,7 @@ export default {
   mounted() {
     new Promise(resolve => {
       this.getPieData(resolve);
+      this.getPieQdfsMj(resolve);
       this.getPieData2(resolve);
       this.getPieDatasz(resolve);
       this.getDougatasz(resolve);
@@ -302,7 +305,7 @@ export default {
 
 
   },
-  components: {mapData, DoughnutData, BarData, WaterWorld, NightingaleCharData, BarDobuleData, PieData,QcSsgqzysytdqkListBySz,QcSsgqzysytdqkListBySs},
+  components: {mapData, DoughnutData, BarData, BarTdsjyt, WaterWorld, NightingaleCharData, BarDobuleData, PieData,PieQdfsMj,QcSsgqzysytdqkListBySz,QcSsgqzysytdqkListBySs},
   methods: {
     handleChange(value) {
       this.type = value;
@@ -358,6 +361,13 @@ export default {
         }
       })
     },
+    getPieQdfsMj() {
+      getAction("/qcsb.qyxx/qcQyxx/tdhqfs").then(res => {
+        if (res.code == 200) {
+          this.resData = res.result;
+        }
+      })
+    },
     getPieData2() {
       getAction("/qcsb.qyxx/qcQyxx/tdhqfsArea").then(res => {
         debugger