src/views/3DOverview/components/RightContentProductRate.vue

@@ -75,7 +75,7 @@ export default {
           type: 'value',
           name: '成品率',
           min: 'dataMin',
-          splitNumber: 3,
+          splitNumber: 2,
           nameTextStyle: {
             color: '#fffc',
             align: 'right',

src/views/3DOverview/components/RightContentRealtimeProduction.vue

@@ -1,5 +1,5 @@
 <template>
-  <techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)">
+  <techy-box style="width: 100%; height: calc(100% - 36px);">
     <!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
 
     <new-bar
@@ -24,116 +24,16 @@
 </template>
 
 <script>
-import echarts from 'echarts'
 import TechyBox from './TechyBox.vue'
 import newBar from './newBar.vue'
-import resize from '@/views/OperationalOverview/components/mixins/resize'
 
 export default {
   name: 'RealtimeProductionHorizontalBarChart',
   components: { TechyBox, newBar },
-  mixins: [resize],
+  props: {},
-  props: {
-    id: {
-      type: String,
-      default: 'default-linechart-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
-    return {
+    return {}
-      chart: null,
+  }
-      option: {
-        color: ['#FF7345', '#52FFF1', '#6A6E87', '#9452FFA6'],
-        grid: {
-          top: 0,
-          left: 0,
-          right: '5%',
-          bottom: 0,
-          containLabel: true
-        },
-        xAxis: {
-          type: 'value',
-          boundaryGap: [0, 0.001],
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            fontSize: 8
-            // rotate: 10
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#fffa'
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: '#fff3'
-            }
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: ['产线1', '产线2', '产线3', '产线4', '产线5', '产线6'],
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            fontSize: 10,
-            color: '#fffa'
-          },
-          axisTick: { show: false },
-          splitLine: {
-            lineStyle: {
-              color: '#fffa'
-            }
-          }
-        },
-        series: [
-          {
-            name: '2011',
-            type: 'bar',
-            barWidth: 5,
-            data: Array(6)
-              .fill(0)
-              .map(value => Math.floor(Math.random() * 1000))
-          },
-          {
-            name: '2012',
-            type: 'bar',
-            barWidth: 5,
-            data: Array(6)
-              .fill(0)
-              .map(value => Math.floor(Math.random() * 1000))
-          }
-        ]
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
-      this.chart.setOption(this.option)
-    })
-  },
-  beforeDestroy() {
-    if (this.chart) this.chart.dispose()
-    this.chart = null
-  },
-  methods: {}
 }
 </script>
 <style scoped>

src/views/3DOverview/components/newBar.vue

@@ -89,8 +89,8 @@ export default {
               this.chartName === 'process-fault'
                 ? 'rgba(119, 255, 242, 1)'
                 : this.chartName === 'fault-category'
-                  ? '#31a2ff'
+                ? '#31a2ff'
-                  : '#fff9',
+                : '#fff9',
             show: true,
             offset: [-12, 10],
             position: 'top',
@@ -113,6 +113,7 @@ export default {
           name: this.dataList[1].name,
           type: 'bar',
           barWidth: 20,
+          yAxisIndex: 1,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: this.dataList[1].topColor },
@@ -124,6 +125,7 @@ export default {
         {
           // 柱顶
           name: this.dataList[1].name,
+          yAxisIndex: 1,
           type: 'pictorialBar',
           barWidth: 20,
           symbol: 'circle',
@@ -143,8 +145,8 @@ export default {
               this.chartName === 'process-fault'
                 ? 'rgba(119, 255, 242, 1)'
                 : this.chartName === 'fault-category'
-                  ? '#31a2ff'
+                ? '#31a2ff'
-                  : '#fff9',
+                : '#fff9',
             show: true,
             offset: [12, 10],
             position: 'top',
@@ -154,6 +156,7 @@ export default {
         {
           // 柱底
           name: this.dataList[1].name,
+          yAxisIndex: 1,
           type: 'pictorialBar',
           barWidth: 20,
           symbol: 'circle',
@@ -170,7 +173,6 @@ export default {
           // 柱体
           name: this.dataList[0].name,
           type: 'bar',
-          // barWidth: 26,
           barWidth: barWidth,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -191,7 +193,6 @@ export default {
           // 柱顶
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          // barWidth: 26,
           barWidth: barWidth,
           symbol: 'circle',
           symbolPosition: 'end',
@@ -209,8 +210,8 @@ export default {
               this.chartName === 'process-fault'
                 ? 'rgba(119, 255, 242, 1)'
                 : this.chartName === 'fault-category'
-                  ? '#31a2ff'
+                ? '#31a2ff'
-                  : '#fff9',
+                : '#fff9',
             show: true,
             offset: [0, 10],
             position: 'top',
@@ -222,7 +223,6 @@ export default {
           // 柱底
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          // barWidth: 26,
           barWidth: barWidth,
           symbol: 'circle',
           symbolOffset: [0, '50%'],
@@ -249,15 +249,16 @@ export default {
       this.chart = echarts.init(this.$refs.chartContainer)
       this.chart.setOption({
         grid: {
-          top: '16%',
+          top: '24%',
-          left: '2%',
+          left: '8%',
-          right: '2%',
+          right: '5%',
           bottom: '3%',
           containLabel: true
         },
         legend: {
           itemWidth: 8,
           itemHeight: 8,
+          top: '2%',
           right: '2%',
           textStyle: {
             color: '#fff9'
@@ -281,31 +282,68 @@ export default {
           },
           data: this.nameList
         },
-        yAxis: {
+        yAxis: [
-          axisLine: {
+          {
-            lineStyle: {
+            name: '产量/m²',
-              type: 'solid',
+            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-              color: this.dataList[0].bottomColor,
+            type: 'value',
-              // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
+            splitNumber: 3,
-              width: '1' // 坐标线的宽度
+            axisTick: { show: false },
-            }
+            onZero: true,
+            position: 'left',
+            offset: 10,
+            axisLine: {
+              lineStyle: {
+                type: 'solid',
+                color: this.dataList[0].bottomColor,
+                // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
+                width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dotted',
+                color: 'rgba(119, 255, 242, 0.2)'
+              }
+            },
+            type: 'value'
           },
-          axisTick: {
+          {
-            show: false
+            name: '能耗kw/h',
-          },
+            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
-          axisLabel: {
+            type: 'value',
-            textStyle: {
+            splitNumber: 3,
-              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            axisTick: { show: false },
-            }
+            onZero: true,
-          },
+            position: 'left',
-          splitLine: {
+            offset: 48,
-            lineStyle: {
+            axisLine: {
-              type: 'dotted',
+              lineStyle: {
-              color: 'rgba(119, 255, 242, 0.2)'
+                type: 'solid',
-            }
+                color: this.dataList[1].bottomColor,
-          },
+                width: '1' // 坐标线的宽度
-          type: 'value'
+              }
-        },
+            },
+            axisLabel: {
+              textStyle: {
+                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+              }
+            },
+            splitLine: {
+              show: false,
+              // lineStyle: {
+              //   type: 'dotted',
+              //   color: 'rgba(119, 255, 242, 0.2)'
+              // }
+            },
+            type: 'value'
+          }
+        ],
         series: this.series
       })
     }
@@ -354,10 +392,12 @@ export default {
     left: calc(100vw/1920 * 48); */
   /* bottom: calc(10% + 100vh/1920 * 28); */
   bottom: 20px;
-  left: 9%;
+  left: 6%;
   height: 30px;
   width: 90%;
-  background: linear-gradient(to top, #49fbd789, transparent);
+  border-radius: 3px;
+  /* border: 1px solid #49fbd7; */
+  background: linear-gradient(to top, #49fbd789 5%, transparent);
   transform: skew(-35deg);
   z-index: 0;
 }