update

src/components/yx-dark/chart/gradientChart.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="bar-chart" :id="id"></div>
+</template>
+
+<script>
+import * as echarts from "echarts/core";
+import { BarChart } from "echarts/charts";
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+} from "echarts/components";
+
+import { LabelLayout, UniversalTransition } from "echarts/features";
+
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+]);
+
+export default {
+  name: "GradientChart",
+  props: {
+    series: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      id: Math.random().toString(),
+      chart: null,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    series: {
+      deep: true,
+      handler: function () {
+        console.log("BarChart: series changed!");
+        this.init();
+      },
+    },
+  },
+  methods: {
+    updateXAxis() {
+      const hour = +new Date().getHours();
+      return Array(24)
+        .fill(1)
+        .map((_, index) => {
+          if (hour - index < 0) {
+            return 24 + hour - index + ":00";
+          }
+          return hour - index + ":00";
+        })
+        .reverse();
+    },
+    init() {
+      if (!this.chart)
+        this.chart = echarts.init(document.getElementById(this.id));
+      this.chart.setOption({
+        grid: {
+          top: 32,
+          left: 56,
+          bottom: 36,
+          right: 20,
+        },
+        xAxis: {
+          type: "category",
+          data: this.updateXAxis(),
+          axisLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff9",
+            fontSize: 16,
+            lineHeight: 2,
+            margin: 12,
+            rotate: 30,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // name: "单位/℃",
+          // nameTextStyle: {
+          // 	color: "#fff9",
+          // 	fontSize: adjust(8),
+          // 	align: "right",
+          // },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            formatter: "{value} ℃",
+            color: "#fff9",
+            fontSize: 16,
+            lineHeight: 2,
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#5982b2a0",
+            },
+          },
+          // data: [100, 200, 300, 400, 500],
+        },
+        series: [
+          {
+            // data: this.series,
+            data: Array(24)
+              .fill(1)
+              .map(() => {
+                let v = Math.ceil(Math.random() * 100);
+                while (v < 60) {
+                  v = Math.ceil(Math.random() * 100);
+                }
+                return v;
+              }),
+            type: "bar",
+            barWidth: 8,
+            label: {
+              show: true,
+              fontSize: 14,
+              color: "#eee8",
+              position: "topRight",
+              rotate: 90,
+              offset: [5, 0],
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#A0FF49" },
+                { offset: 0.35, color: "#49FF9A" },
+                { offset: 0.7, color: "#49F2FF" },
+                { offset: 1, color: "#0D6FFF" },
+              ]),
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bar-chart {
+  height: 100%;
+}
+</style>