From 35ece7e45e77221ed61717861b158d779e35e29e Mon Sep 17 00:00:00 2001
From: zhangdi <15053473693@163.com>
Date: Tue, 10 Dec 2024 19:36:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/workbench/components/eacharts.vue   | 110 +++++++++
 .../components/eacharts_nightpie.vue          | 108 +++++++++
 .../workbench/components/eacharts_pie.vue     | 106 +++++++++
 src/views/workbench/components/eacharts_x.vue | 210 ++++++++++++++++++
 4 files changed, 534 insertions(+)
 create mode 100644 src/views/workbench/components/eacharts.vue
 create mode 100644 src/views/workbench/components/eacharts_nightpie.vue
 create mode 100644 src/views/workbench/components/eacharts_pie.vue
 create mode 100644 src/views/workbench/components/eacharts_x.vue

diff --git a/src/views/workbench/components/eacharts.vue b/src/views/workbench/components/eacharts.vue
new file mode 100644
index 0000000..d861b8f
--- /dev/null
+++ b/src/views/workbench/components/eacharts.vue
@@ -0,0 +1,110 @@
+<template>
+
+  <!-- eacharts 图表 -->
+  <div class="bar_charts" id="bar_echart"></div>
+
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "",
+    },
+    echartData: {
+      type: Array,
+      default: {}
+    },
+
+  },
+  watch: {
+    echartData(val) {
+      this.pieInfo = val
+      this.$nextTick(() => {
+        this.maintenanceInit()
+      })
+    }
+  },
+  data() {
+    return {
+      form: {
+        searchTime: "",
+        startTime: "",
+        endTime: "",
+      },
+      calendarShow: false,
+      mode: "range",
+      upkeepStatInfo: {},
+      pieInfo: [],//饼图数据
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    // 维修统计柱状图
+    maintenanceInit() {
+      var myChart = this.$echarts.init(document.getElementById('bar_echart'));
+      let opts = {
+        tooltip: {},
+        legend: {
+          //图例组件
+          data: ["总计", "已完成", "未完成"],
+          itemWidth: 15,
+          itemHeight: 10,
+        },
+        xAxis: {
+          data: this.echartData.xData,
+        },
+        grid: {
+          top: "25%",
+          left: "10%",
+          right: "5%",
+          bottom: "15%",
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "总计",
+            type: "bar",
+            data: this.echartData.total,
+            barWidth: 25, // 设置柱子宽度
+            barGap: "0", // 设置不同系列之间的间隔为0
+            itemStyle: {
+              color: "#2478f2",
+            },
+          },
+          {
+            name: "已完成",
+            type: "bar",
+            data: this.echartData.completed,
+            barWidth: 25, // 设置柱子宽度
+            barGap: "0", // 设置不同系列之间的间隔为0
+            itemStyle: {
+              color: "#84b7f9",
+            },
+          },
+          {
+            name: "未完成",
+            type: "bar",
+            data: this.echartData.unCompleted,
+            barWidth: 25, // 设置柱子宽度
+            barGap: "0", // 设置不同系列之间的间隔为0
+            itemStyle: {
+              color: "#5f9cf8",
+            },
+          },
+        ],
+      };
+      //4.使用刚指定的配置项和数据显示图表。
+      myChart.setOption(opts);
+    },
+
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bar_charts {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/workbench/components/eacharts_nightpie.vue b/src/views/workbench/components/eacharts_nightpie.vue
new file mode 100644
index 0000000..2d62a99
--- /dev/null
+++ b/src/views/workbench/components/eacharts_nightpie.vue
@@ -0,0 +1,108 @@
+<template>
+  <!-- 饼状图 -->
+  <div class="probability_box" id="device_echarts"></div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// import lEchart from "@/uni_modules/lime-echart/components/lime-echart/";
+import { nextTick } from 'vue';
+export default {
+  // components: { lEchart },
+  props: {
+    type: {
+      type: String,
+      default: "",
+    },
+    echartData: {
+      type: Array,
+      default: []
+    }
+  },
+  watch: {
+    echartData(val) {
+      this.pieInfo = val
+
+      this.$nextTick(() => {
+        this.maintenancePieInit()
+      })
+
+    }
+  },
+  data() {
+    return {
+      form: {
+        searchTime: "",
+        startTime: "",
+        endTime: "",
+      },
+      pieInfo: [],//饼图数据
+
+    };
+  },
+  mounted() {
+    console.log(111111111, this.echartData)
+  },
+  methods: {
+    // 故障现象分类
+    maintenancePieInit() {
+      var myChart = this.$echarts.init(document.getElementById('device_echarts'));
+      let opts = {
+        tooltip: {
+          trigger: 'item',
+          transitionDuration: 0,//防止页面抖动
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ['50%', '50%'],
+            roseType: 'area',
+            label: {
+              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
+              normal: {
+                show: true,
+                fontSize: 8, // 是否显示标签[ default: false ]
+                position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
+                formatter: "{b}\n {c}", // 标签内容
+                color: '#000'
+              },
+            },
+
+            data: this.pieInfo,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 1)",
+              },
+            },
+            labelLine: {
+              // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
+              normal: {
+                show: true, // 是否显示视觉引导线。
+                length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
+                length2: 5,
+
+                // 视觉引导项第二段的长度。
+                lineStyle: {
+                  // 视觉引导线的样式
+                  type: "solid",
+                },
+              },
+            },
+          },
+        ],
+      };
+      //4.使用刚指定的配置项和数据显示图表。
+      myChart.setOption(opts);
+    },
+
+  },
+};
+</script>
+<style lang="scss" scoped>
+.probability_box {
+  width: 100%;
+  height: 100%
+}
+</style>
diff --git a/src/views/workbench/components/eacharts_pie.vue b/src/views/workbench/components/eacharts_pie.vue
new file mode 100644
index 0000000..bfc6f3b
--- /dev/null
+++ b/src/views/workbench/components/eacharts_pie.vue
@@ -0,0 +1,106 @@
+<template>
+ <!-- 饼状图 -->
+ <div class="probability_box" id="error_echarts"></div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// import lEchart from "@/uni_modules/lime-echart/components/lime-echart/";
+import { nextTick } from 'vue';
+export default {
+  // components: { lEchart },
+  props: {
+    type: {
+      type: String,
+      default: "",
+    },
+    echartData: {
+      type: Array,
+      default: []
+    }
+  },
+  watch: {
+    echartData(val) {
+      this.pieInfo = val
+      this.$nextTick(() => {
+        this.maintenancePieInit()
+      })
+    }
+  },
+  data() {
+    return {
+      form: {
+        searchTime: "",
+        startTime: "",
+        endTime: "",
+      },
+      pieInfo: [],//饼图数据
+
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+    // 故障现象分类
+    maintenancePieInit() {
+
+      var myChart = this.$echarts.init(document.getElementById('error_echarts'));
+      let opts = {
+        tooltip: {
+          trigger: 'item',
+          transitionDuration: 0,//防止页面抖动
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ['40%', '70%'],
+            label: {
+              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
+              normal: {
+                show: true,
+                fontSize: 8, // 是否显示标签[ default: false ]
+                position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
+                formatter: "{b}\n {c}", // 标签内容
+                color: '#000'
+              },
+            },
+
+            data: this.pieInfo,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 1)",
+              },
+            },
+            labelLine: {
+              // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
+              normal: {
+                show: true, // 是否显示视觉引导线。
+                length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
+                length2: 5,
+
+                // 视觉引导项第二段的长度。
+                lineStyle: {
+                  // 视觉引导线的样式
+                  type: "solid",
+                },
+              },
+            },
+          },
+        ],
+      };
+      //4.使用刚指定的配置项和数据显示图表。
+      myChart.setOption(opts);
+    },
+
+  },
+};
+</script>
+<style lang="scss" scoped>
+.probability_box {
+  width: 100%;
+  height: 100%
+}
+</style>
diff --git a/src/views/workbench/components/eacharts_x.vue b/src/views/workbench/components/eacharts_x.vue
new file mode 100644
index 0000000..5283efb
--- /dev/null
+++ b/src/views/workbench/components/eacharts_x.vue
@@ -0,0 +1,210 @@
+<template>
+
+  <!-- eacharts 图表 -->
+  <div class="bar_charts" id="bar_echart"></div>
+
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "",
+    },
+    echartData: {
+      type: Array,
+      default: {}
+    },
+
+  },
+  watch: {
+    echartData(val) {
+      this.pieInfo = val
+      this.$nextTick(() => {
+        this.maintenanceInit()
+      })
+    }
+  },
+  data() {
+    return {
+      form: {
+        searchTime: "",
+        startTime: "",
+        endTime: "",
+      },
+      calendarShow: false,
+      mode: "range",
+      upkeepStatInfo: {},
+      pieInfo: [],//饼图数据
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    // 维修统计柱状图
+    maintenanceInit() {
+      let data = [{
+        name: '姓名1',
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10
+      },
+      {
+        name: '姓名1',
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10
+      },
+      {
+        name: '姓名1',
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10
+      },
+      {
+        name: '姓名1',
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10
+      },
+      {
+        name: '姓名1',
+        value: (Math.random() * 10).toFixed(0),
+        sum: 10
+      },
+
+      ];
+      let opt = {
+        index: 0
+      }
+      let color = ['#FC619D', '#FF904D', '#48BFE3'];
+      let getArrByKey = (data, k) => {
+        let key = k || "value";
+        let res = [];
+        if (data) {
+          data.forEach(function (t) {
+            res.push(t[key]);
+          });
+        }
+        return res;
+      };
+      var myChart = this.$echarts.init(document.getElementById('bar_echart'));
+      let opts = {
+        grid: {
+          top: '2%',
+          bottom: -15,
+          right: 30,
+          left: -30,
+          containLabel: true
+        },
+        xAxis: {
+          show: false
+        },
+        yAxis: [{
+          triggerEvent: true,
+          show: true,
+          inverse: true,
+          data: getArrByKey(data, 'name'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            color: '#666',
+            align: 'left',
+            margin: 80,
+            fontSize: 13,
+            formatter: function (value, index) {
+              if (opt.index === 0 && index < 3) {
+                return '{idx' + index + '|' + (1 + index) + '} {title|' + value + '}'
+              } else if (opt.index !== 0 && (index + opt.index) < 9) {
+                return '{idx|0' + (1 + index + opt.index) + '} {title|' + value + '}'
+              } else {
+                return '{idx|' + (1 + index + opt.index) + '} {title|' + value + '}'
+              }
+            },
+            rich: {
+              idx0: {
+                color: '#FB375E',
+                backgroundColor: '#FFE8EC',
+                borderRadius: 100,
+                padding: [5, 8]
+              },
+              idx1: {
+                color: '#FF9023',
+                backgroundColor: '#FFEACF',
+                borderRadius: 100,
+                padding: [5, 8]
+              },
+              idx2: {
+                color: '#01B599',
+                backgroundColor: '#E1F7F3',
+                borderRadius: 100,
+                padding: [5, 8]
+              },
+              idx: {
+                color: '#333',
+                borderRadius: 100,
+                padding: [5, 8]
+              },
+              title: {
+                width: 165
+              }
+            }
+          },
+        }, {
+          triggerEvent: true,
+          show: false,
+          inverse: true,
+          data: getArrByKey(data, 'name'),
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            color: '#666',
+            align: 'left',
+            margin: 20,
+            fontSize: 13,
+
+          }
+        }],
+        series: [{
+          name: '条',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: data,
+          barWidth: 10,
+          itemStyle: {
+            color: (val) => {
+              if (val.dataIndex < 3 && opt.index === 0) {
+                return color[val.dataIndex];
+              } else {
+                return '#1990FF'
+              }
+            },
+            barBorderRadius: 30,
+          }
+        }]
+      };
+      //4.使用刚指定的配置项和数据显示图表。
+      myChart.setOption(opts);
+    },
+
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bar_charts {
+  width: 100%;
+  height: 100%;
+}
+</style>