样式修改

src/views/cockpitNew/gdbh.vue

@@ -1,7 +1,18 @@
 <template>
     <div class="gdbh">
         <div class="box">
+            <div class="title">建设用地规划指标</div>
+            <div class="centent">
+                <div class="item">
 
+                </div>
+                <div class="item">
+
+                </div>
+            </div>
+            <div id="echart">
+
+            </div>
         </div>
     </div>
 </template>
@@ -65,4 +76,30 @@ export default {
     -webkit-box-shadow: none;
     box-shadow: none;
 }
+
+.title {
+    border-width: 0px;
+    width: 100%;
+    height: 40px;
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    color: #00FFFF;
+    padding: 2%;
+    text-align: justify;
+}
+
+#echart {
+    width: 280px;
+    height: 230px;
+    width: 280px;
+    height: 230px;
+    position: relative;
+    left: -350px;
+    top: 59px;
+}
+.centent{
+    border: #00FFFF 1px solid;
+}
+/* #ec */
 </style>

src/views/cockpitNew/tdsy.vue

@@ -102,6 +102,9 @@
 
 
         <div v-show="!stateOwnedOrcollective">
+            <div id="acrossEchart">
+
+            </div>
             <div id="verticalEchart">
 
             </div>
@@ -429,7 +432,7 @@ export default {
                 xAxis: {
                     show: true,
                     type: 'category',
-                    data: ['公共服务','公共服务','公共服务','公共服务','公共服务','公共服务','公共服务','公共服务','公共服务'],
+                    data: ['公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务'],
                     axisLabel: {          //坐标轴字体颜色
                         textStyle: {
                             color: '#fff'
@@ -493,11 +496,176 @@ export default {
             };
             myChart.setOption(option);
 
+        },
+
+        buildAcrossEchart() {
+            var dom = document.getElementById('acrossEchart');
+            var myChart = window.echarts.init(dom);
+
+            var spNum = 5, _max = 100;
+            var y_data = ['初设批复', '施工期', '完建期', '已竣工'];
+            var _datamax = [100, 100, 100, 100],
+                _data1 = [
+                    { value: 20, data: 10 },
+                    { value: 20, data: 10 },
+                    { value: 20, data: 10 },
+                    { value: 20, data: 10 }
+                ],
+                _data2 = [
+                    { value: 80, data: 30 },
+                    { value: 30, data: 30 },
+                    { value: 30, data: 30 },
+                    { value: 30, data: 30 }
+                ];
+            var fomatter_fn = function (v) {
+                return v.value + '%'
+            }
+            var _label = {
+                normal: {
+                    show: false,
+                    position: 'inside',
+                    formatter: fomatter_fn,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 16
+                    }
+                }
+            };
+            let option = {
+                backgroundColor: "rgba(0,0,0,0)",
+                grid: {
+                    containLabel: true,
+                    top: '16%',
+                    left: 0,
+                    right: 6,
+                    bottom: '10%'
+                },
+                legend: {
+                    top: '90%',
+                    left: '25%',
+                    data: [
+                        { name: "已处置", icon: "rect" },
+                        { name: "未处置", icon: "rect" },
+                    ],
+                    // 大小 和位置 文字样式
+                    itemGap: 12,
+                    /*    right: 20,*/
+                    textStyle: {
+                        fontSize: 14,
+                        color: "#ffffff",
+                        fontFamily: "SourceHanSansCN-Regular"
+                    }
+                },
+                tooltip: {
+                    show: true,
+                    backgroundColor: '#fff',
+                    borderColor: '#ddd',
+                    borderWidth: 1,
+                    textStyle: {
+                        color: '#3c3c3c',
+                        fontSize: 16
+                    },
+                    formatter: function (p) {
+                        return '名称：' + p.seriesName + '<br>' + '数量：' + p.data.data + '<br>' + '占比：' + p.value + '%';
+                    },
+                    extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
+                },
+                xAxis: {
+                    splitNumber: '',
+                    interval: _max / spNum,
+                    max: _max,
+                    axisLabel: {
+                        show: false,
+                        formatter: function (v) {
+                            var _v = Number((v / _max * 100).toFixed(0));
+                            return _v == 0 ? _v : _v + '%';
+                        }
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: false
+                    }
+                },
+                yAxis: [{
+                    show: false,
+                    data: y_data,
+                    axisLabel: {
+                        fontSize: 16,
+                        color: '#fff'
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: false
+                    }
+                }, {
+                    show: false,
+                    data: y_data,
+                    axisLine: {
+                        show: false
+                    }
+                }],
+                series: [{
+                    type: 'bar',
+                    silent: true,
+                    yAxisIndex: 1,
+                    barWidth: 20,
+                    itemStyle: {
+                        color: 'RGBA(41, 82, 180, 0.5)',
+                        emphasis: {
+                            color: 'rgba(255,255,255,0.3)'
+                        }
+                    },
+                    data: _datamax
+                }, {
+                    type: 'bar',
+                    name: '已处置',
+                    stack: '2',
+                    label: _label,
+                    legendHoverLink: false,
+                    barWidth: 20,
+                    itemStyle: {
+                        color: '#01AEFC',
+                        emphasis: {
+                            color: '#00BCD4'
+                        }
+                    },
+                    data: _data1
+                }, {
+                    type: 'bar',
+                    name: '未处置',
+                    stack: '2',
+                    legendHoverLink: false,
+                    barWidth: 20,
+                    label: _label,
+                    itemStyle: {
+                        color: '#FFD200',
+                        emphasis: {
+                            color: '#FF9800'
+                        }
+                    },
+                    data: _data2
+                },
+                ]
+            };
+            myChart.setOption(option);
+
         }
+
     },
     mounted() {
         this.getRenKou();
         this.buildverticalEchart();
+        this.buildAcrossEchart();
 
     },
     beforeUpdate() { }, //生命周期 - 更新之前
@@ -729,12 +897,22 @@ export default {
     }
 }
 
-#verticalEchart {
+#acrossEchart {
+
+    width: 280px;
+    height: 230px;
+    position: relative;
+    left: -6%;
+    top: 5px;
+    display: inline-block
+}
 
+#verticalEchart {
+    display: inline-block;
     width: 280px;
     height: 230px;
     position: relative;
-    left: 164%;
+    left: 24%;
     top: 11px;
 }
 </style>