行政区划标签

src/views/cockpitNew1/tdsc.vue

@@ -2,33 +2,11 @@
   <div class="tdsc">
     <div class="title">土地收储</div>
     <div class="content">
-      <!-- <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>在变控规</p>
-          <span>66</span>个
-
-        </div>
-      </div>
-      <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>已入库控规 </p>
-          <span>66</span>个
-
-        </div>
-      </div> -->
-
     </div>
-    <div id="tdsc_echart">
+    <!-- <div id="tdsc_echart">
+
+    </div> -->
+    <div id="tdsc_echart_xzqh">
 
     </div>
 
@@ -234,11 +212,196 @@ export default {
         ],
       }
 
+      myChart.setOption(option);
+    },
+    initEchartXzqh() {
+      var dom = document.getElementById('tdsc_echart_xzqh');
+      var myChart = window.echarts.init(dom);
+
+      // const legendType = 'center'
+      const legendType = 'center'
+
+      let option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        grid: {
+          containLabel: true,
+          bottom: '1%',
+          top: '40%',
+          left: '5%',
+          right: legendType === 'center' ? '5%' : '25%',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          orient: legendType === 'center' ? '' : 'vertical',
+          bottom: "80%",
+          right: legendType === 'center' ? 'center' : '2%',
+          // data: ['2023/06/08', '2023/10/07','2023/10/11'],
+          data: ['征收', '回收', '收购'],
+
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 40,
+          icon: "rect",
+          textStyle: {
+            fontSize: 12,
+            color: '#fff',
+            padding: [5, 0, 0, 2],
+            rich: {
+              a: {
+                verticalAlign: 'middle',
+              },
+            },
+          },
+
+        },
+        xAxis: {
+          triggerEvent: true,
+          data: ['崖州区', '天崖区', '吉阳区', '海棠区'],
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            color: '#fff',
+            align: 'center',
+            verticalAlign: 'top',
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              show: true,
+              color: '#0B3561',
+              width: 2,
+            },
+          },
+        },
+        yAxis: [
+          {
+            name: "面积/公顷",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: 12,
+              padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              fontSize: 10,
+              color: '#fff',
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'solid',
+                color: '#0B3561',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '征收',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorItem = ['#3b93e3', '#186bb8'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [120, 75, 90, 100],
+          },
+          {
+            name: '回收',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+
+                  let colorItem = ['#efc943', '#ec9a1b'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [120, 75, 90, 100],
+          },
+          {
+            name: '收购',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorItem = ['#4ee1ac', '#12a972'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [102, 130, 80, 100],
+          },
+        ],
+      }
+
       myChart.setOption(option);
     },
   },
   mounted() {
     this.initEchart();
+    // this.initEchartXzqh();
+
   },
   beforeUpdate() { }, //生命周期 - 更新之前
   updated() { }, //生命周期 - 更新之后
@@ -287,54 +450,6 @@ export default {
   top: 18%;
 }
 
-.item {
-  width: 45%;
-  height: 30%;
-  display: inline-block;
-  // border: #00FFFF 1px solid;
-
-}
-
-.icon {
-  width: 50px;
-  padding: 1.5%;
-  border-radius: 8px;
-  background-color: rgba(104, 244, 251, 0.215686);
-  display: inline-block;
-  height: 50px
-}
-
-.icon2 {
-  background: no-repeat 50%;
-  background-image: url("/static/images/cockpitNew/u296.svg");
-  /* border: #00FFFF 1px solid; */
-  width: 45px;
-  height: 45px;
-  display: inline-block;
-
-}
-
-.text {
-  display: inline-block;
-  // border: #00FFFF 1px solid;
-  width: 100px;
-
-  p {
-    font-kerning: normal;
-    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-    font-weight: 700;
-    font-style: normal;
-    font-size: 14px;
-    color: #FFFFFF;
-  }
-
-  span {
-    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-    font-weight: 700;
-    font-style: normal;
-    color: #68F4FB;
-  }
-}
 
 #tdsc_echart {
   left: 1rem;
@@ -343,21 +458,11 @@ export default {
   height: 11rem;
 }
 
-.legend {
-
-
-
-
-  background: no-repeat -10% 69%;
-  background-size: 65%;
-  // background-image: url(/static/images/cockpitNew/legend.png);
-  background-image: url("/static/images/cockpitNew/legend.png");
-
-  position: absolute;
-  top: 46%;
-  left: 31%;
-  width: 520px;
-  height: 132px;
 
+#tdsc_echart_xzqh {
+  left: 1rem;
+  top: 2rem;
+  width: 32rem;
+  height: 11rem;
 }
 </style>

src/views/viewer1.vue

@@ -13,7 +13,6 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 
-// import JSYD from './homepage/jsyd.vue';
 import JSYD from './cockpitNew1/jsyd';
 import TDSC from './cockpitNew1/tdsc';
 import HYSY from './cockpitNew1/hysy';
@@ -77,7 +76,7 @@ export default {
                         if (pickObj.id.properties.hasProperty('name')) {
                             const name = pickObj.id.properties.name.getValue();
                             const address = pickObj.id.properties.adcode.getValue();
-                            const center = pickObj.id.properties.center.getValue();
+                            const center = pickObj.id.properties.centroid.getValue();
 
                             pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString("RGBA(24, 100, 166, 1)");
 
@@ -110,23 +109,48 @@ export default {
                 const twoDArray = res.geometry.coordinates[0][0];
                 const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
 
+                console.log();
 
                 viewer.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
+                    text: res.properties.name,
+                    label: {
+                        scale: 1,
+                        font: "bolder 18px sans-serif",
+                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                        text: res.properties.name,//图标名称
+                        fillColor: Cesium.Color.fromCssColorString("#ffffff"),
+                        pixelOffset: new Cesium.Cartesian2(5, -15),
+                        zIndex: 3,
+                    },
+                    billboard: {
+                        // 图像地址，URI或Canvas的属性
+                        image: "./static/images/overview/htq.png",
+                        height: 60,
+                        // 宽度（以像素为单位）
+                        width: 100,
+                        // 相对于坐标的垂直位置
+                        // verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                        // // 相对于坐标的水平位置
+                        // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                        scale: 1.0,
+                        zIndex: 2,
+
+                        show: true
+                    },
                     properties: {
                         'type': "cockpit",
                         'name': res.properties.name,
-                        'center': res.properties.center,
+                        'centroid': res.properties.centroid,
                         'adcode': res.properties.adcode,
                     },
                     polygon: {
-                        // 获取指定属性（positions，holes（图形内需要挖空的区域））
+                        zIndex: 1,
                         hierarchy: {
                             positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
                         },
-                        // 边框
                         outline: false,
                         material: Cesium.Color.fromCssColorString("RGBA(24, 100, 166, 0.7)"),
-                        // 是否被提供的材质填充
                         height: 100,
                         extrudedHeight: 450,