'init'

2022-11-07 08:45:49 +08:00
commit 4d1231adc2
1222 changed files with 194552 additions and 0 deletions
--- a/src/views/EquipmentManager/components/charts/pl-JDL-Chart.vue
+++ b/src/views/EquipmentManager/components/charts/pl-JDL-Chart.vue
@@ -0,0 +1,205 @@
+<template>
+  <div ref="pl-jdl-chart" class="pl-jdl-chart" style="width: 100%; height: 100%;" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'ProductionLineJDLChart',
+  props: {},
+  data() {
+    return {
+      chart: null,
+      options: {
+        // tooltip: {
+        //   trigger: 'axis',
+        //   axisPointer: {
+        //     type: 'shadow'
+        //   }
+        // },
+        grid: {
+          top: '10%',
+          left: '2%',
+          right: '5%',
+          bottom: 0,
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['A', 'B', 'C', 'D', 'E'],
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff3d'
+              }
+            },
+            axisLabel: {
+              color: '#fff'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            splitLine: {
+              lineStyle: {
+                color: '#ffffff3d'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff3d'
+              }
+            },
+            axisLabel: {
+              color: '#ffffff9d'
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: { barBorderRadius: [4, 4, 0, 0] },
+            data: [
+              {
+                value: 110,
+                itemStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#9DD5FF'
+                      },
+                      {
+                        offset: 1,
+                        color: '#1295FF'
+                      }
+                    ],
+                    global: false
+                  }
+                }
+              },
+              {
+                value: 52,
+                itemStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#FF8BC3'
+                      },
+                      {
+                        offset: 1,
+                        color: '#EB46A1'
+                      }
+                    ],
+                    global: false
+                  }
+                }
+              },
+              {
+                value: 200,
+                itemStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#85F6E9'
+                      },
+                      {
+                        offset: 1,
+                        color: '#2EC6B4'
+                      }
+                    ],
+                    global: false
+                  }
+                }
+              },
+              {
+                value: 320,
+                itemStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#C79DFF'
+                      },
+                      {
+                        offset: 1,
+                        color: '#A490FF'
+                      }
+                    ],
+                    global: false
+                  }
+                }
+              },
+              {
+                value: 95,
+                itemStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#FFE873'
+                      },
+                      {
+                        offset: 1,
+                        color: '#E7AE2A'
+                      }
+                    ],
+                    global: false
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    window.addEventListener('resize', () => {
+      if (this.chart) this.chart.resize()
+    })
+
+    this.$nextTick(() => {
+      if (!this.chart) this.chart = echarts.init(this.$refs['pl-jdl-chart'])
+      this.chart.setOption(this.options)
+    })
+  },
+  methods: {}
+}
+</script>
+
+<style scoped></style>