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

<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",
    },
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      id: "",
      chart: null,
    };
  },
  methods: {
    initChart() {
      let that = this;
      const chart = echarts.init(this.$el);
      const xData = [];
      const fsData = [];
      this.list.forEach((element) => {
        xData.push(new Date(element.time).formatDate("hh时"));
        fsData.push(element.fs + 5);
      });
      let option = {
        grid: {
          top: 50,
          bottom: 50,
          left: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            const data = params[0]["data"];
            new Date(data.time).formatDate("yyyy-MM-dd hh时");
            return [
              new Date(data.time).formatDate("yyyy-MM-dd hh时"),
              "天气：" + data.tqmc + "",
              "风速：" + data.fs + " m/s",
              "风向：" + data.fx + " 度",
              "气温：" + data.wd + " ℃",
              "大气压强：" + data.dqyl + " pa",
              "湿度：" + data.sd + " %",
            ].join("<br>");
          },
        },
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: [
          {
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false },
          },
          {
            type: "value",
            // max: 25,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false },
          },
        ],

        series: [
          {
            type: "custom",
            renderItem: function (param, api) {
              const spiltSize = 2;
              if (param.dataIndex % spiltSize == 0 && that.list) {
                const xx = param.coordSys.width / ((that.list.length / spiltSize) | 1);
                const x = param.coordSys.x + xx * (param.dataIndex / spiltSize) * 1.05;
                const y = param.coordSys.y - 30;
                const image = require("@assets/icon/svg/weather/" + that.list[param.dataIndex]["tqtp"] + ".png");
                return {
                  type: "group",
                  children: [
                    {
                      type: "image",
                      style: {
                        image: image,
                        x: -5,
                        y: 0,
                        width: 30,
                        height: 30,
                      },
                      position: [x, y],
                    },
                  ],
                };
              }
            },
            data: this.list,
            yAxisIndex: 0,
            z: 11,
          },
          {
            type: "custom",
            renderItem: function (param, api) {
              const spiltSize = 2;
              if (param.dataIndex % spiltSize == 0 && that.list) {
                const xx = param.coordSys.width / ((that.list.length / spiltSize) | 1);
                const x = param.coordSys.x + 8 + xx * (param.dataIndex / spiltSize) * 1.05;
                const y = param.coordSys.y;
                return {
                  type: "path",
                  shape: {
                    pathData: "M31 16l-15-15v9h-26v12h26v9z",
                    x: -15 / 2,
                    y: -15 / 2,
                    width: 15,
                    height: 15,
                  },
                  rotation: (Math.PI / 180) * (that.list[param.dataIndex]["fx"] + 90),
                  // rotation: (Math.PI / 180) * 45,
                  position: [x, 200],
                  style: api.style({
                    stroke: "#555",
                    lineWidth: 1,
                  }),
                };
              }
            },

            data: that.list,
            z: 10,
          },
          {
            type: "line",
            lineStyle: { normal: { color: "#303f6e" } },
            data: fsData,
            z: 1,
          },
        ],
      };

      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();
      }, 500);
    });
  },
  updated() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.$el.style.width = this.width;
        this.$el.style.height = this.height;
        this.initChart();
      }, 1000);
    });
  },
  unmounted() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

<style lang="less">
.chart {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>