sis_zhfx/src/components/chart/line/img-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: "img-line-chart",
  componentName: "img-line-chart",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "13.889vh",
    },
    // 数据
    list: {
      type: Array,
      default: () => [
        {
          title: "日发电量",
          yAxisIndex: 0,
          value: [
            {
              text: "1",
              value: 1,
              weather: "sun",
              direction: "n",
            },
            {
              text: "2",
              value: 2,
              weather: "sun",
              direction: "s",
            },
            {
              text: "3",
              value: 1,
              weather: "sun",
              direction: "w",
            },
            {
              text: "4",
              value: 3,
              weather: "sun",
              direction: "e",
            },
            {
              text: "5",
              value: 3,
              weather: "sun",
              direction: "nw",
            },
            {
              text: "6",
              value: 3,
              weather: "sun",
              direction: "ne",
            },
            {
              text: "7",
              value: 3,
              weather: "sun",
              direction: "se",
            },
            {
              text: "8",
              value: 3,
              weather: "sun",
              direction: "sw",
            },
            {
              text: "9",
              value: 3,
              weather: "sun",
              direction: "sw",
            },
            {
              text: "10",
              value: 3,
              weather: "sun",
              direction: "sw",
            },
            {
              text: "11",
              value: 3,
              weather: "sun",
              direction: "sw",
            },
            {
              text: "12",
              value: 3,
              weather: "sun",
              direction: "sw",
            },
            {
              text: "13",
              value: 3,
              weather: "sun",
              direction: "sw",
            },
            {
              text: "14",
              value: 3,
              weather: "sun",
              direction: "sw",
            },
            {
              text: "15",
              value: 3,
              weather: "sun",
              direction: "sw",
            },
            {
              text: "16",
              value: 3,
              weather: "sun",
              direction: "sw",
            },
          ],
        },
        {
          title: "上网电量",
          yAxisIndex: 0,
          value: [
            {
              text: "1",
              value: 1,
            },
            {
              text: "2",
              value: 2,
            },
            {
              text: "3",
              value: 1,
            },
            {
              text: "4",
              value: 3,
            },
          ],
        },
      ],
    },
    // 单位
    units: {
      type: Array,
      default: () => ["(MW)"],
    },
    showLegend: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      id: "",
      chart: null,
      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
      imgs: {
        sun: require("@assets/png/weather/sun.png"),
        cloud: require("@assets/png/weather/cloud.png"),
        rain: require("@assets/png/weather/rain.png"),
      },
      directions: {
        n: require("@assets/png/direction/n.svg"),
        s: require("@assets/png/direction/s.svg"),
        w: require("@assets/png/direction/w.svg"),
        e: require("@assets/png/direction/e.svg"),
        nw: require("@assets/png/direction/nw.svg"),
        ne: require("@assets/png/direction/ne.svg"),
        sw: require("@assets/png/direction/sw.svg"),
        se: require("@assets/png/direction/se.svg"),
      },
    };
  },
  computed: {
    legend() {
      return this.list.map((t) => {
        return t.title;
      });
    },
    xdata() {
      return this.list[0].value.map((t) => {
        return t.text;
      });
    },
    yAxis() {
      let result = [
        {
          type: "value",
          name: "",
          axisLabel: {
            show: false,
          },
          //分格线
          splitLine: {
            show: false,
          },
          min: 0,
          max: 10,
        },
      ];
      this.units.forEach((value, index) => {
        result.push({
          type: "value",
          name: value,
          axisLabel: {
            formatter: "{value}",
            fontSize: util.vh(14),
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: partten.getColor("gray"),
              type: "dashed",
            },
          },
        });
      });

      return result;
    },
    series() {
      let result = [];

      this.list.forEach((value, index) => {
        if (index == 0) {
          result.push({
            name: value.title,
            type: "line",
            smooth: true,
            zlevel: index,
            lineStyle: {
              normal: {
                color: this.color[index],
                width: 1,
              },
            },
            yAxisIndex: value.yAxisIndex,
            data: value.value.map((t) => {
              return {
                value: t.value,
                label: {
                  show: true,
                  position: "top",
                  formatter: function (e) {
                    return ["  {weather| }"];
                  },
                  rich: {
                    weather: {
                      height: 15,
                      backgroundColor: {
                        image: this.imgs[t.weather],
                      },
                    },
                  },
                  borderWidth: 1,
                  borderRadius: 4,
                  padding: [4, 10],
                  lineHeight: 26,
                  distance: 20,
                },
              };
            }),
          });
          result.push({
            name: "风向",
            type: "bar",
            smooth: true,
            zlevel: 9999,
            lineStyle: {
              normal: {
                color: this.color[index],
                width: 1,
              },
            },
            yAxisIndex: 0,
            barGap: "0%",
            barCategoryGap: "0%",
            clip: false,
            data: value.value.map((t) => {
              return {
                value: -2,
                label: {
                  show: true,
                  position: "inside",
                  formatter: function (e) {
                    return ["  {direction| }"];
                  },
                  rich: {
                    direction: {
                      height: 20,
                      backgroundColor: {
                        image: this.directions[t.direction],
                      },
                    },
                  },
                  borderWidth: 1,
                  borderRadius: 4,
                  padding: [4, 10],
                  lineHeight: 26,
                  distance: 20,
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: "#606769",
                  color: "transparent",
                },
              };
            }),
          });
        } else {
          result.push({
            name: value.title,
            type: "line",
            smooth: true,
            zlevel: index,
            label: {
              show: false,
              position: "top",
              borderWidth: 1,
              borderRadius: 4,
              padding: [4, 10],
              lineHeight: 26,
              distance: 20,
            },
            lineStyle: {
              normal: {
                color: this.color[index],
                width: 1,
              },
            },
            yAxisIndex: value.yAxisIndex,
            data: value.value.map((t) => {
              return t.value;
            }),
          });
        }
      });

      return result;
    },
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$el);
      let option = {
        color: this.color,
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.4)",
          textStyle: {
            color: "#fff",
            fontSize: util.vh(16),
          },
          formatter: function (params) {
            let str = "";
            for (let i = 0; i < params.length; i++) {
              if (params[i].seriesName == "风向") {
                continue;
              }
              if (i == 0) {
                str += `${params[i].name}<br/>${params[i].seriesName}: ${
                  params[i].data.value ? params[i].data.value : params[i].data
                }<br/>`;
                continue;
              }
              str += `${params[i].seriesName}: ${
                params[i].data.value ? params[i].data.value : params[i].data
              }<br/>`;
            }
            return str;
          },
        },
        legend: {
          show: this.showLegend,
          data: this.legend,
          right: 56,
          icon: "circle",
          itemWidth: 6,
          inactiveColor: partten.getColor("gray"),
          textStyle: {
            color: partten.getColor("grayl"),
            fontSize: 12,
          },
        },
        grid: {
          top: 32,
          left: 8,
          right: 8,
          bottom: 32,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              fontSize: 14,
              textStyle: {
                color: partten.getColor("gray"),
              },
            },
            data: this.xdata,
            offset: 32,
            axisLine: { onZero: true },
          },
        ],
        yAxis: this.yAxis,
        series: this.series,
      };

      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>