耕地保护样式

src/views/cockpitNew/gdbh.vue

@@ -4,7 +4,18 @@
             <div class="title">建设用地规划指标</div>
             <div class="centent">
                 <div class="item">
-
+                    <p>
+                        <span>·</span>
+                        地保有量
+                        <span>354.56</span>
+                        KM2
+                    </p>
+                    <p>
+                        <span>·</span>
+                        永久基本农田
+                        <span>354.56</span>
+                        KM2
+                    </p>
                 </div>
                 <div class="item">
 
@@ -43,7 +54,7 @@ export default {
     deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
-<style  scoped>
+<style lang="scss" scoped>
 .gdbh {
     border-width: 0px;
     position: absolute;
@@ -98,8 +109,23 @@ export default {
     left: -350px;
     top: 59px;
 }
-.centent{
+
+.centent {
     border: #00FFFF 1px solid;
+    width: 280px;
+    height: 185px;
+    position: relative;
+    left: 6%;
 }
-/* #ec */
+
+// .item {
+//     border: #00FFFF 1px solid;
+//     height: 40%;
+//     margin-bottom: 10%;
+
+//     background-color: rgba(40, 63, 109, 1)
+//      p {
+//         color: #fff;
+//     }
+// }
 </style>

src/views/cockpitNew/tdsy.vue

@@ -105,6 +105,9 @@
             <div id="acrossEchart">
 
             </div>
+            <!-- <div class="echartInfo">
+                <p>计划供应项目 <span>123</span>个</p>
+            </div> -->
             <div id="verticalEchart">
 
             </div>
@@ -120,7 +123,7 @@ export default {
     components: {},
     data() {
         return {
-            stateOwnedOrcollective: true
+            stateOwnedOrcollective: false
         };
     },
     //监听属性 类似于data概念
@@ -415,14 +418,14 @@ export default {
                 grid: {
                     left: '5%',
                     right: '6%',
-                    bottom: '5%',
+                    bottom: '15%',
                     top: '10%',
                     containLabel: true
                 },
                 legend: {
                     icon: 'circle',
                     right: "center",
-                    top: 214,
+                    top: 230,
                     itemWidth: 12,
                     itemHeight: 12,
                     textStyle: {
@@ -432,8 +435,13 @@ export default {
                 xAxis: {
                     show: true,
                     type: 'category',
-                    data: ['公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务'],
-                    axisLabel: {          //坐标轴字体颜色
+                    data: ['共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', "公共服务", "公共服务"],
+                    max: 9,
+                    interval: 1,
+
+
+                    axisLabel: {
+                        //坐标轴字体颜色
                         textStyle: {
                             color: '#fff'
                         }
@@ -481,7 +489,8 @@ export default {
                     itemStyle: {  //柱子颜色
                         color: 'rgb(18,236,183)',
                     },
-                    data: [232, 193, 240, 214, 239, 223, 202]
+                    data: [232, 193, 240, 214, 239, 223, 202, 100, 300, 400],
+                    barCategoryGap: '20%',
                 }, {
                     name: '离线',
                     type: 'bar',
@@ -491,7 +500,9 @@ export default {
                         barBorderRadius: [8, 8, 0, 0],
                         color: 'rgb(252,206,22)',
                     },
-                    data: [320, 332, 301, 334, 390, 330, 320]
+                    data: [320, 332, 301, 334, 390, 330, 320, 100, 300, 400],
+                    barCategoryGap: '20%',
+
                 }]
             };
             myChart.setOption(option);
@@ -507,14 +518,14 @@ export default {
             var _datamax = [100, 100, 100, 100],
                 _data1 = [
                     { value: 20, data: 10 },
-                    { value: 20, data: 10 },
-                    { value: 20, data: 10 },
+                    { value: 10, data: 10 },
+                    { value: 60, data: 10 },
                     { value: 20, data: 10 }
                 ],
                 _data2 = [
-                    { value: 80, data: 30 },
-                    { value: 30, data: 30 },
+                    { value: 50, data: 30 },
                     { value: 30, data: 30 },
+                    { value: 78, data: 30 },
                     { value: 30, data: 30 }
                 ];
             var fomatter_fn = function (v) {
@@ -541,17 +552,16 @@ export default {
                     bottom: '10%'
                 },
                 legend: {
-                    top: '90%',
-                    left: '25%',
                     data: [
-                        { name: "已处置", icon: "rect" },
-                        { name: "未处置", icon: "rect" },
+                        { name: "出让", icon: "circle" },
+                        { name: "划拨", icon: "circle" },
                     ],
                     // 大小 和位置 文字样式
                     itemGap: 12,
-                    /*    right: 20,*/
+                    top: 200,
+                    right: 40,
                     textStyle: {
-                        fontSize: 14,
+                        fontSize: 11,
                         color: "#ffffff",
                         fontFamily: "SourceHanSansCN-Regular"
                     }
@@ -572,9 +582,10 @@ export default {
                 },
                 xAxis: {
                     splitNumber: '',
-                    interval: _max / spNum,
-                    max: _max,
+                    interval: 50,
+                    max: 50,
                     axisLabel: {
+                        rotate: 10,
                         show: false,
                         formatter: function (v) {
                             var _v = Number((v / _max * 100).toFixed(0));
@@ -618,21 +629,20 @@ export default {
                     type: 'bar',
                     silent: true,
                     yAxisIndex: 1,
-                    barWidth: 20,
                     itemStyle: {
-                        color: 'RGBA(41, 82, 180, 0.5)',
+                        color: 'RGBA(41, 82, 180, 0)',
                         emphasis: {
-                            color: 'rgba(255,255,255,0.3)'
+                            color: 'rgba(255,255,255,0)'
                         }
                     },
                     data: _datamax
                 }, {
                     type: 'bar',
-                    name: '已处置',
+                    name: '出让',
                     stack: '2',
                     label: _label,
                     legendHoverLink: false,
-                    barWidth: 20,
+                    barWidth: '20%',
                     itemStyle: {
                         color: '#01AEFC',
                         emphasis: {
@@ -642,10 +652,9 @@ export default {
                     data: _data1
                 }, {
                     type: 'bar',
-                    name: '未处置',
+                    name: '划拨',
                     stack: '2',
                     legendHoverLink: false,
-                    barWidth: 20,
                     label: _label,
                     itemStyle: {
                         color: '#FFD200',
@@ -902,17 +911,17 @@ export default {
     width: 280px;
     height: 230px;
     position: relative;
-    left: -6%;
-    top: 5px;
+    left: -2%;
+    top: 2px;
     display: inline-block
 }
 
 #verticalEchart {
     display: inline-block;
     width: 280px;
-    height: 230px;
+    height: 260px;
     position: relative;
     left: 24%;
-    top: 11px;
+    top: 2px;
 }
 </style>