横向柱状体

src/views/cockpit/gdbh.vue

@@ -8,60 +8,66 @@
         </el-select>
       </div>
     </div>
-    <div v-show="tab == options[2].value">
-      <pie3d id="gdbh_echart_gdlr" :legendFlag=false unit="" ref="gdbh_echart_gdlr"></pie3d>
-      <pie3d id="gdbh_echart_gdlc" :legendFlag=false unit="" ref="gdbh_echart_gdlc"></pie3d>
-      <div class="legend_gdlx">
-        <div class="gdbh_echart_gdlr_legend">
+    <div class="content_index">
+      <div v-show="tab == options[2].value">
+        <pie3d id="gdbh_echart_gdlr" :legendFlag=false unit="" ref="gdbh_echart_gdlr"></pie3d>
+        <pie3d id="gdbh_echart_gdlc" :legendFlag=false unit="" ref="gdbh_echart_gdlc"></pie3d>
+        <div class="legend_gdlx">
+          <div class="gdbh_echart_gdlr_legend">
 
-        </div>
-        <div class="gdbh_echart_gdlc_legend">
+          </div>
+          <div class="gdbh_echart_gdlc_legend">
 
+          </div>
         </div>
       </div>
-    </div>
 
-    <div v-show="tab == options[1].value">
-      zpqh
-    </div>
-    <div v-show="tab == options[0].value">
-      <div class="content">
-        <div class="item">
-          <div class="icon">
-            <div class="icon_zxkg">
+      <div v-show="tab == options[1].value">
+        zpqh
+      </div>
+      <div v-show="tab == options[0].value">
+        <div class="content">
+          <div class="item">
+            <div class="icon">
+              <div class="icon_zxkg">
 
+              </div>
             </div>
-          </div>
-          <div class="text">
-            <p>水田</p>
-            <span>673.56</span>公顷
+            <div class="text">
+              <p>水田</p>
+              <span>673.56</span>公顷
 
+            </div>
           </div>
-        </div>
-        <div class="item">
-          <div class="icon">
-            <div class="icon_zxkg">
+          <div class="item">
+            <div class="icon">
+              <div class="icon_zxkg">
 
+              </div>
             </div>
-          </div>
-          <div class="text">
-            <p>水浇地</p>
-            <span>673.56</span>公顷
+            <div class="text">
+              <p>水浇地</p>
+              <span>673.56</span>公顷
 
+            </div>
           </div>
-        </div>
-        <div class="item">
-          <div class="icon">
-            <div class="icon_zxkg">
+          <div class="item">
+            <div class="icon">
+              <div class="icon_zxkg">
 
+              </div>
             </div>
-          </div>
-          <div class="text">
-            <p>旱地</p>
-            <span>673.56</span>公顷
+            <div class="text">
+              <p>旱地</p>
+              <span>673.56</span>公顷
 
+            </div>
           </div>
         </div>
+
+        <div id="gdxz_echart">
+
+        </div>
       </div>
     </div>
 
@@ -158,6 +164,186 @@ export default {
         });
       });
     },
+    init_gdxz_echart() {
+
+      var dom = document.getElementById("gdxz_echart");
+      var myChart = window.echarts.init(dom);
+      let barTopColor = ["#CBB835", "#33C6E2", '#157FFE', '#8F48F0'];
+      let barBottomColor = ["#D09311", "#279AB0", '#154AD2', '#670BFF'];
+      let option = {
+        backgroundColor: '#051D44',
+        title: {
+          show: false,
+          text: '一行动一活动开展情况',
+          top: 20,
+          left: 'center',
+          textStyle: {
+            color: '#00eaff',
+            fontSize: 18,
+            fontWeight: 'normal'
+          }
+        },
+        tooltip: {
+          show: false,
+          trigger: 'axis',
+          formatter: '一行动一活动开展情况<br>{b}：{c}',
+          backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
+          textStyle: {
+            color: '#fff'
+          },
+          borderColor: "rgba(18, 57, 60, .8)",
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: 'rgba(0, 11, 34, .4)',
+            }
+          }
+        },
+        grid: {
+          top: '14%',
+          bottom: '1%',
+          left: '2%',
+          right: '2%',
+          containLabel: true
+        },
+        xAxis: {
+
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#1C82C5'
+            }
+          },
+          axisLabel: {
+            show: false,
+            rotate: 20,
+            margin: 30,
+            textStyle: {
+              fontSize: 14,
+              color: '#DEEBFF',
+              align: 'center'
+            }
+          },
+          interval: 0
+        },
+        yAxis: {
+          data: ['优等地', '高等地', '中等地', '低等地'],
+
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(28, 130, 197, .3)'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#1C82C5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            margin: 10,
+            textStyle: {
+              fontSize: 12,
+              color: '#DEEBFF',
+            }
+          },
+        },
+
+        series: [{
+          name: '一行动一活动开展情况',
+          type: 'pictorialBar',
+          symbolSize: [10, 26],
+          symbolOffset: [6, 0],
+          z: 12,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return barBottomColor[params.dataIndex];
+              }
+            }
+          },
+          label: {
+            textStyle: {
+              rich: {
+                name: {
+                  color: "#fff", //#BCD3E5
+                  fontSize: 14,
+                },
+                value: {
+                  color: "#64DAFF",
+                  fontSize: 14,
+                },
+                unit: {
+                  color: "#fff", //#BCD3E5
+                  fontSize: 14,
+                },
+              },
+            },
+            show: true,
+            position: 'right',
+            fontSize: 16,
+            formatter: function (params) {
+              return `{value|${params.value}}  {unit|公顷}`;
+            }
+          },
+          symbolPosition: 'end',
+          data: [22, 23, 18, 14],
+        }, {
+          name: '一行动一活动开展情况',
+          type: 'pictorialBar',
+          symbolSize: [10, 26],
+          symbolOffset: [-4, 0],
+          z: 12,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return barTopColor[params.dataIndex];
+              }
+            }
+          },
+          data: [22, 23, 18, 14],
+
+        }, {
+          type: 'bar',
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [{
+                    offset: 1,
+                    color: barTopColor[params.dataIndex]
+                  },
+                  {
+                    offset: 0,
+                    color: barBottomColor[params.dataIndex]
+                  }
+                  ]
+                );
+              },
+              opacity: .9
+            }
+          },
+          z: 16,
+          silent: true,
+          barWidth: 26,
+          barGap: '-100%',
+          data: [22, 23, 18, 14],
+
+        }]
+      };
+
+      myChart.setOption(option);
+
+    },
   },
   mounted() {
     // const optionsData = [
@@ -168,13 +354,25 @@ export default {
     // this.$nextTick(() => {
     //   this.$refs.echartRef.setOptions(optionsData);
     // });
+
+    this.$nextTick((res) => {
+      this.init_gdxz_echart();
+    })
   },
 };
 </script>
 <style lang="scss" scoped>
+#gdxz_echart {
+  width: 34rem;
+  height: 9rem;
+  margin-top: 6rem;
+
+}
+
 .gdbh {
   top: 10px !important;
 
+
   .content {
     // border: #00FFFF 1px solid;
     // position: absolute;
@@ -324,7 +522,7 @@ export default {
   position: fixed;
   left: 109rem;
   bottom: 51rem;
-
+  z-index: 1;
 
   /deep/ .el-input__inner {
     // padding-right: 30px;