底部三个

package.json

@@ -60,6 +60,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "^2.4.0",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"
   },

src/views/bigScreen/drivingCabin/center2.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <container4 title="今日动态">
+      <vue-seamless-scroll :data="listData" class="warp" :class-option="{
+        singleHeight: 35
+      }">
+        <ul class="item">
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/1.png">今日收入</el-col>
+              <el-col :span="5">1234万</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/2.png">今日支出</el-col>
+              <el-col :span="5">1234万</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/3.png">今日新签合同</el-col>
+              <el-col :span="5">1234份</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/4.png">今日安全问题</el-col>
+              <el-col :span="5">1234个</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/5.png">今日质量问题</el-col>
+              <el-col :span="5">1234个</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/6.png">今日设备数</el-col>
+              <el-col :span="5">123台</el-col>
+              <el-col :span="7">运行率：88%</el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/7.png">今日职工数</el-col>
+              <el-col :span="5">890人</el-col>
+              <el-col :span="7">出勤率：73%</el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/8.png">今日生产任务</el-col>
+              <el-col :span="5">890个</el-col>
+              <el-col :span="7">完成率：66%</el-col>
+            </el-row>
+          </li>
+        </ul>
+      </vue-seamless-scroll>
+    </container4>
+  </div>
+
+</template>
+
+<script>
+import container4 from "./components/container4/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'left1',
+  components: {
+    container4,
+    rocketTit,
+    vueSeamlessScroll
+  },
+  data () {
+    return {
+      listData: [1, 2, 3, 4, 5, 6, 7, 8],
+    }
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tit {
+  padding: 16px 24px;
+}
+.img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.data {
+  display: flex;
+  margin: 0 15px;
+  background: rgba(2, 18, 63, 0.4);
+  color: #ffffff;
+  font-size: 18px;
+  .data-item {
+    flex: 1;
+    > div {
+      margin: 5px 0;
+      text-align: center;
+    }
+    .num {
+      font-size: 28px;
+      font-family: Roboto-BlackItalic, Roboto;
+      font-weight: 600;
+      color: #55c5a2;
+      vertical-align: sub;
+      padding-right: 3px;
+    }
+  }
+}
+
+.warp {
+  height: 280px;
+  width: 440px;
+  margin: 0 auto;
+  overflow: hidden;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    li,
+    a {
+      display: block;
+      display: flex;
+      justify-content: space-between;
+      font-size: 15px;
+    }
+    li {
+      display: block;
+      height: 30px;
+      line-height: 30px;
+      background: rgba(2, 18, 63, 0.33);
+      padding-left: 20px;
+      margin: 5px 0;
+      img {
+        vertical-align: sub;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>

src/views/bigScreen/drivingCabin/components/container3/index.vue

@@ -0,0 +1,104 @@
+
+
+<template>
+  <div class="container3">
+    <div class="tit">
+      <rocketTit>{{title}}</rocketTit>
+      <!-- <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div> -->
+    </div>
+    <div class="content">
+      <div class="snap">
+        <slot name="snap"></slot>
+      </div>
+
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../../../components/rocketTit/index.vue";
+
+export default {
+  name: 'container3',
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container3 {
+  display: flex;
+  flex-direction: column;
+  width: 673px;
+  height: 359px;
+  background-image: url(./bg.png);
+  background-size: cover;
+  color: #ffffff;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+
+  .tit {
+    padding: 16px 16px 16px 24px;
+    position: relative;
+    .datePicker {
+      position: absolute;
+      right: 16px;
+      top: 12px;
+
+      ::v-deep .el-date-editor {
+        border-radius: 0;
+        box-shadow: none !important;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        vertical-align: middle;
+        color: #fff;
+        background-color: transparent;
+        .el-range-input,
+        .el-range-separator {
+          color: #fff;
+        }
+        .el-range-editor.is-active {
+          border-color: #fff !important;
+        }
+
+        input {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .content {
+    flex: 1;
+    padding: 2px 2px 2px 22px;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    .snap {
+      position: absolute;
+      top: 20px;
+      left: 25px;
+      font-weight: 300;
+    }
+  }
+}
+</style>

src/views/bigScreen/drivingCabin/components/container4/index.vue

@@ -0,0 +1,145 @@
+
+
+<template>
+  <div class="container4">
+    <div class="tit">
+      <div>{{title}}</div>
+      <!-- <rocketTit>{{title}}</rocketTit> -->
+      <!-- <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div> -->
+    </div>
+    <div class="content">
+      <div class="snap">
+        <slot name="snap"></slot>
+      </div>
+
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../../../components/rocketTit/index.vue";
+
+export default {
+  name: 'container4',
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container4 {
+  display: flex;
+  flex-direction: column;
+  width: 501px;
+  height: 359px;
+  background-image: url(./bg.png);
+  background-size: cover;
+  color: #ffffff;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+
+  .tit {
+    position: relative;
+    padding: 16px 16px 16px 24px;
+    text-align: center;
+    color: #ffffff;
+    font-size: 16px;
+    position: relative;
+    display: inline-block;
+    margin: 0 auto;
+
+    ::before {
+      content: "";
+      display: block;
+      position: absolute;
+
+      left: -75px;
+      top: 25px;
+      width: 82px;
+      height: 3px;
+      background: linear-gradient(
+        90deg,
+        rgba(145, 213, 254, 0) 0%,
+        #91d5fe 100%
+      );
+      border-radius: 2px;
+    }
+    ::after {
+      content: "";
+      display: block;
+      position: absolute;
+
+      right: -75px;
+      top: 25px;
+      width: 82px;
+      height: 3px;
+      background: linear-gradient(
+        90deg,
+        #91d5fe 0%,
+        rgba(145, 213, 254, 0) 100%
+      );
+      border-radius: 2px;
+    }
+
+    .datePicker {
+      position: absolute;
+      right: 16px;
+      top: 12px;
+
+      ::v-deep .el-date-editor {
+        border-radius: 0;
+        box-shadow: none !important;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        vertical-align: middle;
+        color: #fff;
+        background-color: transparent;
+        .el-range-input,
+        .el-range-separator {
+          color: #fff;
+        }
+        .el-range-editor.is-active {
+          border-color: #fff !important;
+        }
+
+        input {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .content {
+    flex: 1;
+    padding: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    .snap {
+      position: absolute;
+      top: 20px;
+      left: 25px;
+      font-weight: 300;
+    }
+  }
+}
+</style>

src/views/bigScreen/drivingCabin/index.vue

@@ -3,6 +3,9 @@
       <div class="left1">
         <left1></left1>
       </div>
+      <div class="left2">
+        <left2></left2>
+      </div>
       <!-- <div class="bg1"></div> -->
 
 
@@ -13,6 +16,10 @@
       <div class="right1">
         <right1></right1>
       </div>
+
+      <div class="right2">
+        <right2></right2>
+      </div>
       <!-- <div class="right1">
         <right1></right1>
       </div>
@@ -38,6 +45,7 @@ import container1 from "../components/container1/index.vue";
 import left1 from "./left1.vue";
 import left2 from "./left2.vue";
 import center1 from "./center.vue";
+import center2 from "./center2.vue";
 import right1 from "./right1.vue";
 import right2 from "./right2.vue";
 import bottom1 from "./bottom1.vue";
@@ -56,6 +64,7 @@ export default {
     right2,
     bottom1,
     bottom2,
+    center2,
   }
 }
 </script>
@@ -84,7 +93,7 @@ export default {
 }
 .left2 {
   position: absolute;
-  top: 245px;
+  top: 605px;
   left: 24px;
 }
 .center1 {
@@ -92,6 +101,11 @@ export default {
   top: 20px;
   left: 578px;
 }
+.center2 {
+  position: absolute;
+  top: 605px;
+  left: 710px;
+}
 
 .right1 {
   position: absolute;
@@ -100,7 +114,7 @@ export default {
 }
 .right2 {
   position: absolute;
-  top: 245px;
+  top: 605px;
   right: 24px;
 }
 .bottom1 {

src/views/bigScreen/drivingCabin/left2.vue

@@ -1,12 +1,10 @@
 <template>
-
   <div>
-    <container2 title="生产总体走势">
+    <container3 title="利润概况">
       <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-                <span slot="snap">件</span>
       <div style="height:100%;width:100%;" ref="chart"></div>
-    </container2>
+    </container3>
   </div>
 
 </template>
@@ -15,7 +13,7 @@
 import scalseBox from '../components/scaleBox.vue'
 import bigScreenHead from "../components/bigScreenHead/index.vue";
 import rocketTit from "../components/rocketTit/index.vue";
-import container2 from "../components/container2/index.vue";
+import container3 from "./components/container3/index.vue";
 
 
 import echarts from 'echarts'
@@ -28,20 +26,15 @@ export default {
     scalseBox,
     bigScreenHead,
     rocketTit,
-    container2,
+    container3,
   },
   data () {
     return {
       dateRange: [],
       chart: null,
       option: {
-        backgroundColor: '',
-        tooltip: {
-          trigger: 'axis'
-        },
         legend: {
-          right: '10',
+          data: ['利润', '利润预测', '利润目标完成率'],
-          data: ['品类1', '品类2', '品类3'],
           textStyle: {
             color: '#fff'
           },
@@ -52,67 +45,166 @@ export default {
           bottom: '3%',
           containLabel: true
         },
-        xAxis: {
+        xAxis: [
-          type: 'category',
+          {
-          boundaryGap: false,
+            type: 'category',
-          data: ['03-21', '03-22', '03-23', '03-24', '03-25', '03-26', '03-27'],
+            data: [
-          splitLine: {
+              '2021-01',
-            show: false//不显示网格线
+              '2021-02',
-          },
+              '2021-03',
-          axisLine: {
+              '2021-04',
-            lineStyle: {
+              '2021-05',
-              color: 'rgb(255, 255, 255)'
+              '2021-06',
+              '2021-07',
+              '2021-08',
+              '2021-09',
+              '2021-10',
+              '2021-11',
+              '2021-12',
+            ],
+            axisPointer: {
+              type: 'shadow'
             },
-          },
+            axisLine: {
-          axisLabel: {
+              lineStyle: {
-            interval: 0,
+                color: 'rgb(255, 255, 255)'
-            rotate: 320
+              },
+            }
           }
-        },
+        ],
-        yAxis: {
+        yAxis: [
-          type: 'value',
+          {
-          splitLine: {
+            type: 'value',
-            show: false//不显示网格线
+            name: '万元',
-          },
+            min: 0,
-          splitArea: {
+            max: 250,
-            show: false//不显示网格区域
+            interval: 50,
-          },
+            axisLabel: {
-          axisLine: {
+              formatter: '{value}'
-            lineStyle: {
-              color: 'rgb(255, 255, 255)'
             },
+            splitLine: {
+              show: false//不显示网格线
+            },
+            splitArea: {
+              show: false//不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgb(255, 255, 255)'
+              },
+            }
+          },
+          {
+            type: 'value',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value} %'
+            },
+            splitLine: {
+              show: false//不显示网格线
+            },
+            splitArea: {
+              show: false//不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgb(255, 255, 255)'
+              },
+            }
           }
+        ],
+        grid: {
+          containLabel: true,
+          width: "99%",
+          left: 0,
+          top: 50,
+          bottom: 50,
         },
+        dataZoom: {},
         series: [
           {
-            name: '品类1',
+            name: '利润',
-            type: 'line',
+            type: 'bar',
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: [
-            smooth: false,
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+            ],
             lineStyle: {
-              color: 'rgba(203, 97, 79, 1)'
+              color: 'rgb(118,196,166)'
-            },
+            }
           },
           {
-            name: '品类2',
+            name: '利润预测',
-            type: 'line',
+            type: 'bar',
-            data: [220, 182, 191, 234, 290, 330, 310],
+            data: [
-            smooth: false,
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            lineStyle: {
+            ],
-              color: 'rgba(215, 170, 34, 1)'
+            itemStyle: {
-            },
+              color: {
+                type: 'linear', // 线性渐变
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: '#B5D3FE' // 0%处的颜色为红色
+                }, {
+                  offset: 1,
+                  color: '#7EA7FC' // 100%处的颜色为蓝
+                }]
+              }
+            }
           },
           {
-            name: '品类3',
+            name: '利润目标完成率',
             type: 'line',
-            data: [150, 232, 201, 154, 190, 330, 410],
+            yAxisIndex: 1,
             smooth: false,
+            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
             lineStyle: {
-              color: 'rgba(121, 139, 219, 1)'
+              color: '#55C5A2'
-            },
+            }
-          },
+          }
+        ],
+        // yAxis: {
+        //   type: 'value',
+        //   splitLine: {
+        //     show: false//不显示网格线
+        //   },
+        //   splitArea: {
+        //     show: false//不显示网格区域
+        //   },
+        //   axisLine: {
+        //     lineStyle: {
+        //       color: 'rgb(255, 255, 255)'
+        //     },
+        //   }
+        // },
+        // series: [
+        //   {
+        //     name: '利润',
+        //     type: 'bar',
+        //     data: [
+        //       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+        //     ]
+        //   },
+        //   {
+        //     name: '利润预测',
+        //     type: 'bar',
+        //     data: [
+        //       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+        //     ]
+        //   },
+        //   {
+        //     name: '利润目标完成率',
+        //     type: 'line',
+        //     yAxisIndex: 1,
+        //     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+        //   }
 
-        ]
+        // ]
       },
     }
   },

src/views/bigScreen/drivingCabin/right2.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <container2 title="经营总体走势">
+    <container3 title="装药量概况">
       <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
       <div style="height:100%;width:100%;" ref="chart"></div>
-    </container2>
+    </container3>
   </div>
 
 </template>
@@ -13,7 +13,7 @@
 import scalseBox from '../components/scaleBox.vue'
 import bigScreenHead from "../components/bigScreenHead/index.vue";
 import rocketTit from "../components/rocketTit/index.vue";
-import container2 from "../components/container2/index.vue";
+import container3 from "./components/container3/index.vue";
 
 
 import echarts from 'echarts'
@@ -26,117 +26,185 @@ export default {
     scalseBox,
     bigScreenHead,
     rocketTit,
-    container2,
+    container3,
   },
   data () {
     return {
       dateRange: [],
       chart: null,
       option: {
-        backgroundColor: '',
-        tooltip: {
-          trigger: 'axis'
-        },
         legend: {
-          right: '10',
+          data: ['利润', '利润预测', '利润目标完成率'],
-          data: ['XX零件收入占比', 'XY零件收入占比'],
           textStyle: {
             color: '#fff'
           },
         },
         grid: {
           left: '3%',
-          right: '8%',
+          right: '6%',
           bottom: '3%',
           containLabel: true
         },
-        xAxis: {
+        xAxis: [
-          type: 'category',
+          {
-          boundaryGap: false,
+            type: 'category',
-          data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
+            data: [
-          splitLine: {
+              '2021-01',
-            show: false//不显示网格线
+              '2021-02',
-          }, 
+              '2021-03',
-          axisLine: {
+              '2021-04',
-            lineStyle: {
+              '2021-05',
-              color: 'rgb(255, 255, 255)'
+              '2021-06',
+              '2021-07',
+              '2021-08',
+              '2021-09',
+              '2021-10',
+              '2021-11',
+              '2021-12',
+            ],
+            axisPointer: {
+              type: 'shadow'
             },
-          },
+            axisLine: {
-          axisLabel: {
+              lineStyle: {
-            interval: 0,
+                color: 'rgb(255, 255, 255)'
-            rotate: 320
+              },
+            }
           }
-        },
+        ],
-        yAxis: {
+        yAxis: [
-          type: 'value',
+          {
-          splitLine: {
+            type: 'value',
-            show: false//不显示网格线
+            name: '万元',
-          },
+            min: 0,
-          splitArea: {
+            max: 250,
-            show: false//不显示网格区域
+            interval: 50,
-          },
+            axisLabel: {
-          axisLabel: {
+              formatter: '{value}'
-            formatter: "{value}%"
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgb(255, 255, 255)'
             },
+            splitLine: {
+              show: false//不显示网格线
+            },
+            splitArea: {
+              show: false//不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgb(255, 255, 255)'
+              },
+            }
           },
-          min: 0,
+          {
-          max: 100
+            type: 'value',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value} %'
+            },
+            splitLine: {
+              show: false//不显示网格线
+            },
+            splitArea: {
+              show: false//不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgb(255, 255, 255)'
+              },
+            }
+          }
+        ],
+        grid: {
+          containLabel: true,
+          width: "99%",
+          left: 0,
+          top: 50,
+          bottom: 50,
         },
+        dataZoom: {},
         series: [
           {
-            name: 'XX零件收入占比',
+            name: '利润',
-            type: 'line',
+            type: 'bar',
-            data: [55, 30, 45, 35, 55, 60, 60],
+            data: [
-            smooth: false,
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+            ],
             lineStyle: {
-              color: 'rgba(78, 187, 147, 1)'
+              color: 'rgb(118,196,166)'
-            },
+            }
-            areaStyle: {//区域填充渐变颜色
+          },
+          {
+            name: '利润预测',
+            type: 'bar',
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ],
+            itemStyle: {
               color: {
-                type: 'linear',
+                type: 'linear', // 线性渐变
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [{
-                  offset: 0, color: 'rgba(78, 187, 147, 0.5)' // 0% 处的颜色
+                  offset: 0,
+                  color: '#B5D3FE' // 0%处的颜色为红色
                 }, {
-                  offset: .75, color: 'rgba(78, 187, 147, 0)' // 100% 处的颜色
+                  offset: 1,
-                }],
+                  color: '#7EA7FC' // 100%处的颜色为蓝
-                global: false // 缺省为 false
+                }]
               }
             }
           },
           {
-            name: 'XY零件收入占比',
+            name: '利润目标完成率',
             type: 'line',
-            data: [45, 70, 50, 65, 45, 35, 40],
+            yAxisIndex: 1,
             smooth: false,
+            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
             lineStyle: {
-              color: 'rgba(16,148,249, 1)'
+              color: '#F6D97E'
-            },
-            areaStyle: {//区域填充渐变颜色
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [{
-                  offset: 0, color: 'rgba(16,148,249, 0.5)' // 0% 处的颜色
-                }, {
-                  offset: .75, color: 'rgba(16,148,249, 0)' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
             }
-          },
+          }
+        ],
+        // yAxis: {
+        //   type: 'value',
+        //   splitLine: {
+        //     show: false//不显示网格线
+        //   },
+        //   splitArea: {
+        //     show: false//不显示网格区域
+        //   },
+        //   axisLine: {
+        //     lineStyle: {
+        //       color: 'rgb(255, 255, 255)'
+        //     },
+        //   }
+        // },
+        // series: [
+        //   {
+        //     name: '利润',
+        //     type: 'bar',
+        //     data: [
+        //       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+        //     ]
+        //   },
+        //   {
+        //     name: '利润预测',
+        //     type: 'bar',
+        //     data: [
+        //       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+        //     ]
+        //   },
+        //   {
+        //     name: '利润目标完成率',
+        //     type: 'line',
+        //     yAxisIndex: 1,
+        //     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+        //   }
 
-        ]
+        // ]
       },
     }
   },