Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/views/cockpitNew1/tdsy.vue

@@ -9,7 +9,7 @@
         </div>
 
         <div class="selectTab">
-          <el-select v-model="value" placeholder="请选择">
+          <el-select v-model="value" placeholder="请选择" @change="changeCharts">
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -88,7 +88,7 @@
     </div>
 
     <div v-show="!stateOwnedOrcollective">
-      <div class="deficiency_echart"></div>
+      <!-- <div class="deficiency_echart"></div> -->
       <div id="across_echart"></div>
 
       <div id="vertical_echart"></div>
@@ -106,27 +106,15 @@ export default {
       stateOwnedOrcollective: false,
       options: [
         {
-          value: "选项1",
-          label: "黄金糕",
+          value: "国有建设用地",
+          label: "国有建设用地",
         },
         {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
+          value: "集体供应性土地",
+          label: "集体供应性土地",
         },
       ],
-      value: "",
+      value: "国有建设用地",
     };
   },
   //监听属性 类似于data概念
@@ -138,6 +126,14 @@ export default {
   created() {}, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() {}, //生命周期 - 挂载之前
   methods: {
+    changeCharts(evt){
+console.log(evt);
+this.value = evt
+this.stateOwnedOrcollective = !this.stateOwnedOrcollective
+// if (condition) {
+  
+// }
+    },
     switchStateOwnedButton() {
       this.stateOwnedOrcollective = !this.stateOwnedOrcollective;
     },
@@ -146,110 +142,194 @@ export default {
       var dom = document.getElementById("across_echart");
       var myChart = window.echarts.init(dom);
 
-      //做环形图的本质是 radius: ['内半径', '外半径'] 内半径!=0
-      const backgroundColor = "rgba(0,0,0,0)";
-      const title = {
-        text: "计划供应面积",
-        subtext: "613103.45\n公倾",
-        backgroundColor: "rgba(0,0,0,0)",
-        textStyle: {
-          color: "#fff",
-          fontFamily: "Arial",
-          fontSize: 10,
-          fontStyle: "normal",
-          fontWeight: "400",
+      var dataList = [
+        {
+          value: 310,
+          name: "已出让",
         },
-        subtextStyle: {
-          fontSize: 12,
-          color: "#64daff",
-          fontWeight: "500",
+        {
+          value: 234,
+          name: "已划拨",
         },
-        x: "31%",
-        y: "35%",
-      };
-      const legendType = "center";
+        {
+          value: 135,
+          name: "未供应",
+        },
+      ];
+      var color2 = [
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#FC8053",
+              },
+              {
+                offset: 1,
+                color: "#F2CAA4",
+              },
+            ],
+            global: false,
+          },
+        },
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#6EDC8D ",
+              },
+              {
+                offset: 1,
+                color: "#5BBD88",
+              },
+            ],
+            global: false,
+          },
+        },
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              // {
+              //   offset: 0,
+              //   color: "#f888b1",
+              // },
+              // {
+              //   offset: 1,
+              //   color: "#fbe6ee",
+              // },
+              {
+                offset: 0,
+                color: "#5583e7",
+              },
+              {
+                offset: 1,
+                color: "#36dddb",
+              },
+            ],
+            global: false,
+          },
+        },
+      ];
+      var dataAll = 0;
+      dataList.forEach((item, index) => {
+        item.itemStyle = color2[index];
+        dataAll += item.value;
+      });
 
-      const tooltip = {
-        show: false,
-        trigger: "none",
-        formatter: "{b}:{d}%",
-      };
-      const color = ["#ca9d51", "#5bbd88", "rgba(0,0,0,0)"];
       let option = {
-        backgroundColor,
-        color,
-        title,
-        tooltip,
-
-        grid: {
-          // top: '1%',//生成的echarts图片和顶部的距离
-          bottom: "90px", //echarts图片和底部的距离
-          // left: '1%',//echarts图片和左边的距离
-          // right: '2%',//echarts图片和右边的间距,
-          containLabel: true, //当containLabel:为ture时，以上设置生效
+        backgroundColor: "rgba(0,0,0,0)",
+        legend: {
+          orient: "horizontal",
+          left: "center",
+          bottom: "1%",
+          // selectedMode: 'multiple',
+          padding: [0, 0, 0, 0], //调节legend的位置
+          data: ["类型", "已出让", "已划拨", "未供应"],
+          icon: "rect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
+          itemWidth: 12, // 设置宽度
+          itemHeight: 12, // 设置高度
+          itemGap: 10, // 设置间距
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+            fontSize: 14,
+          },
         },
+        graphic: [
+          {
+            type: "group",
+            top: "middle",
+            left: "center",
+            id: "data",
+            children: [
+              {
+                type: "text",
+                id: "current",
+                top: 100,
+                style: {
+                  text: dataAll,
+                  font: 'bolder 18px "Microsoft YaHei", sans-serif',
+                  fill: "#64DAFF ",
+                  textAlign: "center",
+                },
+              },
+              {
+                type: "text",
+                id: "all",
+                top: 80,
+                style: {
+                  text: "计划供应",
+                  font: 'bolder 14px "Microsoft YaHei", sans-serif',
+                  fill: "#ECF6FF",
+                  textAlign: "center",
+                },
+              },
+              {
+                type: "text",
+                id: "gq",
+                top: 120,
+                style: {
+                  text: "公顷",
+                  font: 'bolder 12px "Microsoft YaHei", sans-serif',
+                  fill: "#4FABCF",
+                  textAlign: "center",
+                },
+              },
+            ],
+          },
+        ],
         series: [
           {
-            name: "网络安全设备",
+            name: "公顷",
             type: "pie",
-            center: ["50%", "50%"], //圆心的位置
-            top: "-14.5%", //单单指的饼图距离上面的距离，top越大饼图越小
-            left: "-13%", //单单指的饼图距离左面的距离，会改变饼图的大小
-            radius: ["38%", "55%"], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
-            avoidLabelOverlap: false, //做同心圆用到
-            clockwise: true, //顺时针排列
-            startAngle: 90, //起始角度 影响不大
-            //roseType:"", // 实心圆 不能出现roseType这个属性
-
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
             label: {
-              show: false, //false不显示饼图上的标签
-              position: "center", //inside（在饼图上显示）,outside(默认就会出现引导线) center
-              formatter: "{b}:{c}",
               normal: {
-                position: "inside", // 在内部显示，outseide 是在外部显示
-                alignTo: "labelLine",
-                textStyle: {
-                  fontWeight: 200,
-                  fontSize: 12, //文字的字体大小
-                  color: "#fff",
-                },
-                formatter: function (params) {
-                  // return '{point|}{white|' + params.name + '}{blue|' + params.percent + '%}\n{yellow|' + params.value + '}';
-                  return params.value + "%";
+                show: false, //是否展示数据
+                position: "inner", // 数值显示在内部
+                color: "#fff",
+                fontSize: 16,
+                fontWeight: 400,
+                formatter: (params) => {
+                  // console.log(params);
+                  return params.percent + "%";
                 },
+                rich: {},
               },
             },
-            itemStyle: {
-              //每个扇形的设置
-              borderColor: "rgba(0,0,0,0)", //扇形边框颜色
-              borderWidth: 1, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
-            },
-            data: [
-              { value: 35, name: "IDS" },
-              { value: 25, name: " WAF" },
-              { value: 30, name: "" },
-            ],
-            // .sort((a, b) => b.value - a.value), //数组从大到小排序
-
             emphasis: {
-              scale: true,
-              scaleSize: 20,
-              //同心圆单独加上的
               label: {
                 show: true,
-                fontSize: 24,
+                fontSize: "16",
                 fontWeight: "bold",
               },
-              //启用鼠标放上去放大效果，这个挺好的
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
             },
+            labelLine: {
+              show: false,
+              // length: 48,
+            },
+            data: dataList,
           },
         ],
       };
+
       myChart.setOption(option);
     },
     init_vertical_echart() {
@@ -276,17 +356,18 @@ export default {
               name: "完成供应项目",
             },
           ],
-          left: "15%",
+          left: "13%",
           top: "4%",
+          itemGap: 5, // 设置间距
           textStyle: {
             color: "#BCD3E5",
-            fontSize: 14,
+            fontSize: 12,
           },
         },
         grid: {
           left: "2%",
           right: "4%",
-          bottom: "6%",
+          bottom: "10%",
           top: "16%",
           containLabel: true,
         },
@@ -328,6 +409,7 @@ export default {
 
             axisLabel: {
               show: true,
+              rotate: 35, //35度角倾斜显示
               textStyle: {
                 color: "#BCD3E5",
                 fontSize: 14,
@@ -535,8 +617,8 @@ export default {
     top: 0px;
     // width: 800px;
     // height: 260px;
-    width: 1080px;
-    height: 310px;
+    width: 50rem;
+    height: 18rem;
     background: inherit;
     background-color: rgba(3, 25, 67, 0.698039215686274);
     border: none;
@@ -591,12 +673,24 @@ export default {
 
     .selectTab {
       /deep/ .el-input__inner {
-    // padding-right: 30px;
-width: 128px !important;
-height: 24px !important;
-line-height: 24px;
-    background-image: url("/static/images/overview/selectBg.png") !important;
-}
+        // padding-right: 30px;
+        width: 128px !important;
+        height: 24px !important;
+        line-height: 24px;
+        padding-left: 22px;
+        padding-right: 0px;
+        font-size: 12px;
+        color: #bcd3e5;
+        border: none;
+        background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        background-size: 100% 100%;
+      }
+      /deep/ .el-input__icon {
+        line-height: 1;
+      }
+      /deep/ .el-input__suffix{
+        right: -2px;
+      }
     }
   }
 }
@@ -759,22 +853,23 @@ line-height: 24px;
 }
 
 #across_echart {
+  position: relative;
   // left: -6rem;
-  top: 2rem;
+  top: 2.1rem;
   width: 15rem;
   height: 15rem;
-  background: rgba(255, 192, 203, 0.214);
+  // background: rgba(255, 192, 203, 0.214);
 }
 
 #vertical_echart {
-  left: 20rem;
+  left: 14rem;
   top: -12.9rem;
-  // width: 55.5rem;
-  // height: 15rem;
+  width: 36rem !important;
+  height: 15rem;
   // right:10px;
   // top: 0px;
-  width: 744px;
-  height: 239px;
+  // width: 744px;
+  // height: 239px;
   // background: greenyellow;
 }