修改图例

src/views/OperationalOverview/coldBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2024-01-15 16:03:39
+ * @LastEditTime: 2024-01-17 14:00:15
  * @Description:
 -->
 <template>
@@ -143,7 +143,7 @@ import pileBarChart from './components/pileBarChart'
 import colorDiv from './components/colorDiv'
 
 // import axios from '@/utils/request'
-import doubleYChart from './components/doubleYChart '
+import doubleYChart from './components/coldDoubleYChart'
 // import elementResizeDetectorMaker from 'element-resize-detector';
 // var erd = elementResizeDetectorMaker(); //创建实例
 // let resizeFun = null

src/views/OperationalOverview/components/baseContainer/index.vue

@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2022-01-19 15:58:17
  * @LastEditors: zhp
- * @LastEditTime: 2024-01-16 16:06:47
+ * @LastEditTime: 2024-01-17 14:57:00
  * @Description: file content
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
 -->
@@ -22,15 +22,14 @@
     </template>
 
     <div class="bar-item">
-      <div v-if="title" class="bar-title">
+      <div v-if="title" class="bar-title" ds>
         <span>
           <svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
           {{ title }}
         </span>
-        <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;">
+        <!-- <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
-          <!-- <svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" /> -->
           {{ time +'-'+ time2 }}
-        </span>
+        </span> -->
       </div>
       <!-- <div v-if="true" class="bar-title">
         <span>
@@ -226,11 +225,13 @@ export default {
     color: #ffffff;
     font-size: 24px;
     padding: 0.67em;
+    display: flex;
   }
 
   .bar-content {
-    padding: 1em;
+    // padding: 1em;
     flex: 1 auto;
+    position: relative;
   }
 
   .no-padding {

src/views/OperationalOverview/components/coldDoubleYChart.vue

@@ -0,0 +1,292 @@
+
+<!--
+ * @Author: zhp
+ * @Date: 2023-09-21 09:06:28
+ * @LastEditTime: 2024-01-17 15:26:04
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div>
+    <div :id="id" class="productChart" :style="{ height:   '390px', width: width }" />
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'linearBarChart'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    borderRadius: {
+      type: Array,
+      default: () => [9, 9, 0, 0]
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    nameList: {
+      type: Array,
+      default: () => []
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      series: [{
+        type: 'bar',
+        data: [],
+        barWidth: 6
+      }]
+    }
+  },
+  mounted() {
+    console.log('mounted')
+    console.log('borderRadius: ', this.borderRadius)
+    // this.$nextTick(() => {
+    //   this.initChart()
+    // })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart(nameList, passRateList, outputNumList) {
+      console.log(nameList, passRateList)
+     let  series= [
+        {
+          name: '产线产量',
+          type: 'bar',
+          yAxisIndex: 1,
+         itemStyle: {
+           normal: {
+             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+               { offset: 0, color: '#9DD5FF' },
+               { offset: 0.3, color: '#1295FF' }
+             ]),
+             label: {
+               show: true,		//开启显示
+               position: 'top',	//在上方显示
+               textStyle: {	    //数值样式
+                 color: '#ced1d5',
+                 fontSize: 12
+               }
+             },
+            }
+            // barBorderRadius: this.borderRadius
+          },
+          barWidth: 12,
+         data: outputNumList
+        },
+        {
+          name: '产线良品率',
+          symbol: 'circle', //变为实心圆
+          type: 'line',
+          yAxisIndex: 0,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(255, 209, 96, 0.18)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 234, 153, 0)'
+              }
+            ])
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
+              lineStyle: {
+                color: 'rgba(255, 209, 96, 1)' //改变折线颜色
+              }
+            }
+          },
+          data: passRateList
+        }
+      ]
+      // const colors = ['#5470C6', '#91CC75', '#EE6666']
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        // color: colors,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "5%",
+          bottom: "3%",
+          containLabel: true
+        },
+        legend: {
+          itemWidth: 10,
+          itemHeight: 10,
+          top: '1%',
+          right: '20px',
+          data: ['产线产量', '产线良品率'],
+          textStyle: {
+            fontSize: 12 * this.beilv,
+            color: '#ced1d5'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#213259', // 左边线的颜色
+              width: '1' // 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          data: nameList
+        },
+        // yAxis: {
+
+        // },
+        yAxis: [
+          {
+            min: function() { // 取最小值向下取整为最小刻度
+              return 0
+            },
+            max: function(value) { // 取最大值向上取整为最大刻度
+              return Math.ceil(value.max)
+            },
+            scale: true,
+            type: 'value',
+            name: '良品率/%',
+            nameTextStyle: {// y轴上方单位的颜色
+              color: '#fff',
+              align: "left",
+            },
+            position: 'right',
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                type: 'solid',
+                color: '#213259', // 左边线的颜色
+                width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#ced1d5', // 坐标值得具体的颜色
+                formatter: '{value}%'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#213259'
+              }
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[0]
+            //   }
+            // },
+          },
+          {
+            min: function() { // 取最小值向下取整为最小刻度
+              return 0
+            },
+            max: function(value) { // 取最大值向上取整为最大刻度
+              return Math.ceil(value.max)
+            },
+            scale: true,
+            type: 'value',
+            name: '产量/㎡', // y轴上方的单位
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: 10,
+              align: "right",
+            },
+            position: 'left',
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                type: 'solid',
+                color: '#213259', // 左边线的颜色
+                width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+                formatter: '{value} 片'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#213259'
+              }
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[1]
+            //   }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
+            // },
+          }
+        ],
+        series: series
+      })
+    }
+  }
+}
+</script>
+<style>
+.productChart{
+  top: -40px;
+}
+</style>

src/views/OperationalOverview/components/doubleYChart .vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2024-01-12 10:25:19
+ * @LastEditTime: 2024-01-17 13:56:46
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <div>
-    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
+    <div :id="id" class="productChart" :style="{ height:   '390px', width: width }" />
   </div>
 </template>
 
@@ -152,11 +152,12 @@ export default {
           left: "3%",
           right: "5%",
           bottom: "3%",
-          width: 'auto',
-          height: "auto",
           containLabel: true
         },
         legend: {
+          itemWidth: 10,
+          itemHeight: 10,
+          right: '20px',
           data: ['产线产量', '产线良品率'],
           textStyle: {
             fontSize: 12 * this.beilv,
@@ -282,3 +283,8 @@ export default {
   }
 }
 </script>
+<style>
+.productChart{
+  top: -40px;
+}
+</style>

src/views/OperationalOverview/components/linearBarChart.vue

@@ -173,3 +173,4 @@ export default {
   }
 }
 </script>
+

src/views/OperationalOverview/components/pileBarChart.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-12-27 13:54:52
- * @LastEditTime: 2023-12-29 16:28:26
+ * @LastEditTime: 2024-01-17 10:09:36
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <div>
-    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
+    <div :id="id" class="productChart" :style="{ height: height + 'px', width: width }" />
   </div>
 </template>
 
@@ -133,14 +133,17 @@ export default {
       // }
       this.chart.setOption({
         legend: {
+          // top: '2.5%',
+          // right: '20px',
           textStyle: {
             color: '#ffffff'
           }
         },
         grid: {
+          top:'80',
           left: '3%',
           right: '4%',
-          bottom: '3%',
+          // bottom: '3%',
           width: 'auto',
           height: 'auto',
           containLabel: true
@@ -213,3 +216,7 @@ export default {
   }
 }
 </script>
+<style scoped lang="scss">
+
+
+</style>

src/views/OperationalOverview/processingBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2024-01-12 16:38:55
+ * @LastEditTime: 2024-01-17 13:52:44
  * @Description:
 -->
 <template>
@@ -1113,7 +1113,7 @@ export default {
   flex: 1 1;
 }
 .h-full {
-  height: calc(100vh - 150px);
+  height: calc(100vh);
 }
 /* .container-main {
   min-height: calc(100vh - 10em);