mm

src/views/dashboard-screen/chard-wrap/card-wrap.vue

@@ -29,7 +29,7 @@ export default {
   height: 100%;
   display: flex;
   flex-direction: column;
-  border: 1px solid teal;
+  //border: 1px solid teal;
 
   .header {
     height: 4vh;

src/views/dashboard-screen/index.vue

@@ -4,7 +4,15 @@
     <div class="content-wrap">
       <div class="coner left">
         <div class="o-item map">
-          1
+          <div class="jryl-wrap">
+            <CardWrap>
+              <span slot="title">今日遗留</span>
+              <div slot="content">
+                <Jryl/>
+              </div>
+            </CardWrap>
+
+          </div>
         </div>
         <div class="o-item">
           <CardWrap>
@@ -72,7 +80,6 @@
             </div>
           </CardWrap>
 
-
         </div>
       </div>
     </div>
@@ -88,12 +95,13 @@ import Dlydtssx from '@/views/dashboard-screen/dlydtssx/index.vue'
 import Dlsdxl from '@/views/dashboard-screen/dlsdxl/index.vue'
 import Dlbpds from '@/views/dashboard-screen/dlbpds/index.vue'
 import Zydbsx from '@/views/dashboard-screen/zydbsx/index.vue'
-import Jxdxqk from "@/views/dashboard-screen/jxdxqk/index.vue";
-import QbDlsbxjdx from "@/views/dashboard-screen/qb-dlsbxjdx/index.vue";
+import Jxdxqk from '@/views/dashboard-screen/jxdxqk/index.vue'
+import QbDlsbxjdx from '@/views/dashboard-screen/qb-dlsbxjdx/index.vue'
+import Jryl from '@/views/dashboard-screen/jryl/index.vue'
 
 export default {
   name: 'Dashboard',
-  components: {QbDlsbxjdx, Jxdxqk, Zydbsx, Dlbpds, Dlsdxl, CardWrap, SyjhdxqkChart, Dlydtssx},
+  components: { Jryl, QbDlsbxjdx, Jxdxqk, Zydbsx, Dlbpds, Dlsdxl, CardWrap, SyjhdxqkChart, Dlydtssx },
   data() {
     return {}
   },
@@ -156,6 +164,16 @@ export default {
           &.map {
             grid-column-start: 1;
             grid-column-end: 5;
+            position: relative;
+
+            .jryl-wrap {
+              width: 25%;
+              height: 260px;
+              position: absolute;
+              z-index: 1;
+              bottom: 0;
+              left: 0;
+            }
           }
 
           &.b-r-3 {

src/views/dashboard-screen/jryl/index.vue

@@ -27,7 +27,7 @@ export default {
         [80, 80, 80]
       ]
       const sealingData = []
-      const gapPerSize = 5
+      const gapPerSize = 10
       const gapData = data.map(() => [gapPerSize, gapPerSize, gapPerSize])
 
       data.forEach((item, index) => {
@@ -50,20 +50,76 @@ export default {
         // gapData.push(gapItem)
       })
       window['sealingData'] = sealingData
-      var barWidth = 30
+      const gapWidth = this.EchartfontSize(125)
+      const barWidth = this.EchartfontSize(15)
+      const symbolOffsetWidth = this.EchartfontSize(5)
+      const symbolSizeWidth = this.EchartfontSize(8)
       this.option = {
-        backgroundColor: '#021132',
         tooltip: {
           trigger: 'item'
         },
+        legend: {
+          selectedMode: false,
+          show: true,
+          top: '5%',
+          right: '30%',
+          width: '100%',
+          height: '100%',
+          // orient: 'vertical',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: this.EchartfontSize(20)
+          },
+          data: [
+            {
+              name: '一级',
+              // 强制设置图形为圆。
+              icon: `image://${window.location.origin}/static/images/icon_red@2x.png`,
+              // 设置文本为红色
+              textStyle: {
+                color: '#ffffff'
+              }
+            },
+            {
+              name: '二级',
+              // 强制设置图形为圆。
+              icon: `image://${window.location.origin}/static/images/icon_yellow@2x.png`,
+              // 设置文本为红色
+              textStyle: {
+                color: '#ffffff'
+              }
+            },
+            {
+              name: '三级',
+              // 强制设置图形为圆。
+              icon: `image://${window.location.origin}/static/images/icon_blue@2x.png`,
+              // 设置文本为红色
+              textStyle: {
+                color: '#ffffff'
+              }
+            }
+
+          ]
+
+        },
         grid: {
-          left: 100,
-          bottom: 100
+          right: '20%',
+          left: '20%',
+          bottom: '10%',
+          // height: '50%',
         },
         xAxis: {
-
-          type: 'value'
-
+          show: false,
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
         },
         yAxis: {
           data: xData2,
@@ -76,12 +132,19 @@ export default {
           },
           axisLine: {
             show: false
+          },
+          axisLabel: {
+            fontSize: this.EchartfontSize(20),
+            color: '#ffffff',
+            formatter: (name) => {
+              return name + '    '
+            }
           }
 
         },
         series: [
-          { // bar1
-            name: 'bar1',
+          { // 一级
+            name: '一级',
             type: 'bar',
             stack: 'total',
             barWidth: barWidth,
@@ -90,75 +153,93 @@ export default {
               color: function(params) {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
-                  color: 'rgba(135, 49, 17,.4)' // 0% 处的颜色
+                  color: 'rgba(231, 73, 2, 0.30)' // 0% 处的颜色
                 }, {
                   offset: 1,
-                  color: 'rgb(135, 49, 17)' // 100% 处的颜色
+                  color: 'rgba(231, 73, 2, 0.60)' // 100% 处的颜色
                 }], false)
               }
             },
-            data: data[1]
+            label: {
+              show: true,
+              position: ['50%', -barWidth - 10],
+              fontSize: this.EchartfontSize(20),
+              color: '#fffff'
+            },
+            data: data[0]
           },
-          { // gapBar
-            name: 'gapBar',
+          { //
+            name: '',
             type: 'bar',
-            barWidth: barWidth,
+            barWidth: gapWidth,
             stack: 'total',
             z: 0,
             itemStyle: {
               color: 'rgba(255,0,0,1)',
-              opacity: 0.7
+              opacity: 0
             },
             data: gapData[0]
           },
-          { // bar2
-            name: 'bar2',
+          { // 二级
+            name: '二级',
             type: 'bar',
             stack: 'total',
             barWidth: barWidth,
             itemStyle: { // lenged文本
-              opacity: 0.7,
+              opacity: 1,
               color: function(params) {
-                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
-                  color: 'rgba(138, 138, 36,.4)' // 0% 处的颜色
+                  color: 'rgba(231, 203, 2, 0.30)' // 0% 处的颜色
                 }, {
                   offset: 1,
-                  color: 'rgb(138, 138, 36)' // 100% 处的颜色
+                  color: 'rgb(72, 72, 36)' // 100% 处的颜色
                 }], false)
               }
             },
+            label: {
+              show: true,
+              position: ['50%', -barWidth - 10],
+              fontSize: this.EchartfontSize(20),
+              color: '#fffff'
+            },
             data: data[1]
           },
-          { // gapBar
-            name: 'gapBar',
+          { //
+            name: '',
             type: 'bar',
-            barWidth: barWidth,
+            barWidth: gapWidth,
             stack: 'total',
             z: 0,
             itemStyle: {
               color: 'rgba(255,0,0,1)',
-              opacity: 0.7
+              opacity: 0
             },
             data: gapData[1]
           },
-          { // bar2
-            name: 'bar3',
+          { // 三级
+            name: '三级',
             type: 'bar',
             stack: 'total',
             barWidth: barWidth,
             itemStyle: { // lenged文本
-              opacity: 0.7,
+              opacity: 1,
               color: function(params) {
-                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
-                  color: 'rgba(60, 151, 171,.4)' // 0% 处的颜色
+                  color: 'rgba(78, 231, 255, 0.30)' // 0% 处的颜色
                 }, {
                   offset: 1,
-                  color: 'rgb(60, 151, 171)' // 100% 处的颜色
+                  color: 'rgba(78, 231, 255, 0.60)' // 100% 处的颜色
                 }], false)
               }
             },
+            label: {
+              show: true,
+              position: ['50%', -barWidth - 10],
+              fontSize: this.EchartfontSize(20),
+              color: '#fffff'
+            },
             data: data[2]
           },
           // { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
@@ -171,79 +252,164 @@ export default {
           //   },
           //   data: data1
           // },
-          { // 上半截柱子顶部圆片
+
+          { // 封口1
             'name': '',
             'type': 'pictorialBar',
-            'symbolSize': [15, barWidth],
-            'symbolOffset': [5, 0],
+            'symbol': 'circle',
             'symbolRotate': 180,
-            'z': 12,
-            'symbolPosition': 'end',
+            'symbolSize': [symbolSizeWidth, barWidth],
+            'symbolOffset': [symbolOffsetWidth, 0],
             itemStyle: {
-              color: '#163F7A',
-              opacity: 1
+              opacity: 1,
+              color: function(params) {
+                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                  offset: 0,
+                  color: 'rgba(237, 118, 101,.4)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(237, 118, 101, .8)' // 100% 处的颜色
+                }], false)
+              }
             },
             label: {
-              show: true,
-              position: 'top',
-              fontSize: 16,
-              color: '#fff'
             },
-            'data': data[0]
+            'symbolPosition': 'start',
+            'data': sealingData[0][0]
           },
-          { // 下半截柱子顶部圆片
+
+          { // 封口2
             'name': '',
             'type': 'pictorialBar',
-            'symbol': 'circle',
+            'symbolSize': [symbolSizeWidth, barWidth],
             'symbolRotate': 180,
-            'symbolSize': [15, barWidth],
-            'symbolOffset': [10, 0],
+            'symbolOffset': [symbolOffsetWidth, 0],
+            'symbolPosition': 'end',
             'z': 12,
             itemStyle: {
               opacity: 1,
               color: function(params) {
                 return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
-                  color: '#FF9A22' // 0% 处的颜色
+                  color: 'rgba(237, 118, 101,1)' // 0% 处的颜色
                 }, {
                   offset: 1,
-                  color: '#FFD56E' // 100% 处的颜色
+                  color: 'rgba(237, 118, 101, 1)' // 100% 处的颜色
+                }], false)
+              }
+            },
+            'data': sealingData[0][1]
+          },
+          { // 封口3
+            'name': '',
+            'type': 'pictorialBar',
+            'symbol': 'circle',
+            'symbolRotate': 180,
+            'symbolSize': [symbolSizeWidth, barWidth],
+            'symbolOffset': [symbolOffsetWidth, 0],
+            'z': 12,
+            itemStyle: {
+              opacity: 1,
+              color: function(params) {
+                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                  offset: 0,
+                  color: 'rgba(255, 238, 91,.1)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(255, 238, 91, .6)' // 100% 处的颜色
                 }], false)
               }
             },
             label: {
-              show: true,
-              position: 'top',
-              fontSize: 16,
-              color: '#fff'
+              // show: true,
+              // position: 'top',
+              // fontSize: 16,
+              // color: '#fff'
               // formatter:(item)=>{
               //     console.log(item)
               //     return 'ssss'
               // }
             },
             'symbolPosition': 'end',
-            'data': data[1]
+            'data': sealingData[1][0]
           },
-          { // 下半截柱子底部圆片
+          { // 封口4
             'name': '',
             'type': 'pictorialBar',
-            'symbolSize': [15, barWidth],
+            'symbolSize': [symbolSizeWidth, barWidth],
             'symbolRotate': 180,
-            'symbolOffset': [-5, 0],
+            'symbolOffset': [symbolOffsetWidth, 0],
+            'symbolPosition': 'end',
             'z': 12,
             itemStyle: {
               opacity: 1,
               color: function(params) {
                 return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 1,
+                  color: 'rgba(255, 238, 91, 1)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(255, 238, 91, 1)' // 100% 处的颜色
+                }], false)
+              }
+            },
+            'data': sealingData[1][1]
+          },
+
+          { // 封口5
+            'name': '',
+            'type': 'pictorialBar',
+            'symbol': 'circle',
+            'symbolRotate': 180,
+            'symbolSize': [symbolSizeWidth, barWidth],
+            'symbolOffset': [symbolOffsetWidth, 0],
+            'z': 12,
+            itemStyle: {
+              opacity: 1,
+              color: function(params) {
+                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
-                  color: '#FF9A22' // 0% 处的颜色
+                  color: 'rgba(162, 237, 255,.1)' // 0% 处的颜色
                 }, {
                   offset: 1,
-                  color: '#FFD56E' // 100% 处的颜色
+                  color: 'rgba(162, 237, 255,.6)' // 100% 处的颜色
                 }], false)
               }
             },
-            'data': [1, 1, 1, 1, 1]
+            label: {
+              // show: true,
+              // position: 'top',
+              // fontSize: 16,
+              // color: '#fff'
+              // formatter:(item)=>{
+              //     console.log(item)
+              //     return 'ssss'
+              // }
+            },
+            'symbolPosition': 'end',
+            'data': sealingData[2][0]
+          },
+          { // 封口5
+            'name': '',
+            'type': 'pictorialBar',
+            'symbolSize': [symbolSizeWidth, barWidth],
+            'symbolRotate': 180,
+            'symbolOffset': [symbolOffsetWidth, 0],
+            'symbolPosition': 'end',
+            'z': 12,
+            itemStyle: {
+              opacity: 1,
+              color: function(params) {
+                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                  offset: 0,
+                  color: 'rgba(162, 237, 255,1)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(162, 237, 255,1)' // 100% 处的颜色
+                }], false)
+              }
+            },
+            'data': sealingData[2][1]
           }
 
         ]
@@ -256,23 +422,10 @@ export default {
 
 <style scoped lang="scss">
 
-$xHeight: 120px;
 .chart-wrap {
-  width: 100%;
-  height: 100%;
-
-  .left-bar {
-    width: 35px;
-    display: inline-block;
-  }
-
-  .right-conent {
-    width: calc(100% - 35px);
-    height: 100%;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: auto $xHeight;
-  }
+  width: 25%;
+  height: 160px;
+  background: teal;
 
 }
 </style>