自定义天气预报图

src/components/chart/line/weather-line-chart.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "weather-line-chart",
+  componentName: "weather-line-char",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "270px",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  methods: {
+    initChart() {
+      const chart = echarts.init(this.$el);
+      let option = {
+        grid: {
+          top: 10,
+          bottom: 50,
+        },
+        xAxis: {
+          type: "category",
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+        },
+        yAxis: [
+          {
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            splitLine: { show: false },
+          },
+        ],
+
+        series: [
+          {
+            type: "custom",
+            renderItem: function (param, api) {
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "image",
+                    style: {
+                      image:
+                        require("@assets/icon/svg/weather/02.png"),
+                      x: 0,
+                      y: 0,
+                      width: 20,
+                      height: 20,
+                    },
+                    position: [param.dataIndexInside * 80 +80, 0],
+                  },
+                ],
+              };
+            },
+            data: [0, 10, 20],
+            yAxisIndex: 0,
+            z: 11,
+          },{
+            type: 'custom',
+            renderItem: function(param, api){
+                        return {
+            type: 'path',
+            shape: {
+                pathData: 'M31 16l-15-15v9h-26v12h26v9z',
+                      x: 0,
+                      y: 0,
+                      width: 20,
+                      height: 20,
+            },
+            rotation: 0,
+            position: [param.dataIndexInside * 80 +80, 200],
+            style: api.style({
+                stroke: '#555',
+                lineWidth: 1
+            })
+        };
+            },
+
+            data: [10,20,30],
+            z: 10
+        }
+        ],
+      };
+
+      chart.clear();
+      chart.setOption(option);
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.$el.style.width = this.width;
+        this.$el.style.height = this.height;
+        this.initChart();
+      }, 1000);
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/views/HealthControl/Health10.vue

@@ -102,6 +102,7 @@
           <img-line-chart
             height="270px"
           />
+          <!-- <weather-line-chart/> -->
         </div>
       </el-col>
     </el-row>
@@ -133,7 +134,8 @@ import TableLineChart from "../../components/chart/line/table-line-chart.vue";
 import ImgLineChart from "../../components/chart/line/img-line-chart.vue";
 import ZoomLineChart from "../../components/chart/line/zoom-line-chart.vue";
 import HealthReport from "@com/other/healthReport/index.vue";
-import WtChooser from "@com/coms/wt-chooser/wt-chooser.vue"
+import WeatherLineChart from "@com/chart/line/weather-line-chart.vue";
+import WtChooser from "@com/coms/wt-chooser/wt-chooser.vue";
 
 export default {
   setup() {},
@@ -144,7 +146,8 @@ export default {
     ImgLineChart,
     ZoomLineChart,
     HealthReport,
-    WtChooser
+    WtChooser,
+    WeatherLineChart,
   },
   data() {
     const that = this;