<template>
  <div class="demo">
    <div ref="myDiv" class="echart_line" />
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      unit: "", // 變量單位賦值
      legendData: ["甲", "乙", "丙", "丁"],
      // 圖表使用的一系列數(shù)據(jù)
      series: [
        {
          unit: "米",
          type: "line",
          data: [
            95, 16, 66, 51, 15, 15, 15, 4, 16, 5, 115, 55, 114, 56, 15, 77, 15,
            99, 153, 22, 33, 88, 23, 11, 33, 46, 22, 11, 6, 129,
          ],
          name: "甲",
        },
        {
          unit: "千克",
          type: "line",
          data: [
            139, 27, 60, 0, 60, 99, 11, 77, 88, 54, 68, 99, 60, 99, 24, 12, 18,
            133, 99, 54, 60, 24, 60, 54, 60, 99, 88, 111, 99, 60,
          ],
          name: "乙",
        },
        {
          unit: "秒",
          type: "line",
          data: [
            54, 14, 3, 69, 23, 88, 60, 54, 60, 54, 16, 72, 54, 14, 19, 34, 36,
            6, 14, 54, 99, 19, 60, 27, 41, 14, 32, 72, 82, 92,
          ],
          name: "丙",
        },
        {
          unit: "安培/摩爾",
          type: "line",
          data: [
            5, 72, 13, 1, 115, 82, 63, 14, 125, 99, 121, 135, 54, 15, 35, 15,
            2.5, 47, 31, 23, 15, 9, 14, 7, 15, 48, 88, 123, 31, 49,
          ],
          name: "丁",
          // yAxisIndex: 0, // 1 可設(shè)置左側(cè)和右側(cè)y軸線條...
        },
      ],
      // x軸刻度數(shù)值
      dataX: [
        "2023-03-01",
        "2023-03-02",
        "2023-03-03",
        "2023-03-04",
        "2023-03-05",
        "2023-03-06",
        "2023-03-07",
        "2023-03-08",
        "2023-03-09",
        "2023-03-10",
        "2023-03-11",
        "2023-03-12",
        "2023-03-13",
        "2023-03-14",
        "2023-03-15",
        "2023-03-16",
        "2023-03-17",
        "2023-03-18",
        "2023-03-19",
        "2023-03-20",
        "2023-03-21",
        "2023-03-22",
        "2023-03-23",
        "2023-03-24",
        "2023-03-25",
        "2023-03-26",
        "2023-03-27",
        "2023-03-28",
        "2023-03-29",
        "2023-03-30",
      ],
    };
  },
  mounted() {
    this.chart();
  },
  methods: {
    chart() {
      this.$nextTick(() => {
        var that = this;
        // 初始化一個(gè)Echarts
        this.myChart = echarts.init(this.$refs.myDiv);
        // 給Echarts設(shè)置對(duì)應(yīng)的配置纏住
        this.myChart.setOption({
          color: ["#F26522", "#8DC63F", "#00AEEF", "#FFC20E"],
          // 圖表左上方的圓點(diǎn)圖例
          legend: {
            type: "scroll",
            data: that.legendData,
            icon: "circle",
            itemHeight: 10,
            top: 4,
            left: 24,
          },
          // x軸的設(shè)置
          xAxis: {
            type: "category",
            // x軸的凸起小豎點(diǎn)
            axisTick: {
              show: true,
              inside: true,
              lineStyle: {
                color: "#999",
              },
            },
            // x軸的線條顏色
            axisLine: {
              lineStyle: {
                type: "dashed",
                color: "#999",
              },
            },
            // x軸使用的數(shù)據(jù)
            data: that.dataX,
            // x軸的文字設(shè)置
            axisLabel: {
              margin: 8,
              interval: 7,
              formatter: function (params) {
                return (params = params.slice(0));
              },
            },
          },
          // y軸的設(shè)置
          yAxis: [
            {
              type: "value",
              name: "(KPA)", // 左上方的圓點(diǎn)下方
              nameTextStyle: {
                // 設(shè)置位置
                padding: [10, 0, 0, -20],
              },
              axisLine: {
                show: false, // 最左側(cè)的y軸的線條 將其隱藏
                lineStyle: {
                  color: "#BDBDBD", // 另外的顏色設(shè)置，如刻度數(shù)值
                },
              },
              splitLine: {
                show: true, // 顯示橫向分隔線
                lineStyle: {
                  type: "dashed", // 樣式為虛線
                  color: "#e1e1e1", // 設(shè)置對(duì)應(yīng)分隔線的顏色
                },
              },
              min: 0, // 設(shè)置左側(cè)Y軸的最小刻度從哪里開始，此案例從0開始
              max: function (value) {
                // 設(shè)置最大值，即為最大值，當(dāng)然也可以再加點(diǎn)
                // return value.max;
                return value.max + 12;
              },
            },
          ],
          // 鼠標(biāo)懸浮提示框
          tooltip: {
            trigger: "axis", // 觸發(fā)
            // 軸指針
            axisPointer: {
              // 鼠標(biāo)樣式
              animation: true,
              // 豎線條樣式
              lineStyle: {
                color: "#123", // 設(shè)置顏色
                width: 2, // 寬度
                opacity: 0.8,
              },
            },
            /**
             * 重點(diǎn)是這個(gè)tooltip的formatter加工函數(shù)
             * */
            formatter: function (format) {
              /**
               * 根據(jù)format參數(shù)定義動(dòng)態(tài)dom
               * */
              var result = `<div
                  style="height:100%;
                  min-height:${30 + 28 * format.length}px;
                  width: 200px;
                  background: rgba(255, 255, 255, 0.27);
                  "
                >
                <div 
                  style="width: 100%;
                    height: 30px;
                    padding-left:10px;
                    background: rgba(0, 0, 0, 0.79);
                    font-size: 14px;
                    line-height: 30px;
                    color: #ffffff;
                  "
                >
                  ${name ? name : format[0].name}
                </div>
                <div
                  style="
                      height: 100%;
                      padding-left:10px;
                      width: 100%;
                      border-radius: 3px;
                  "
                >
              `;
              /**
               * 遍歷判斷動(dòng)態(tài)添加dom單位
               * */
              format.map((item) => {
                // console.log("item", item);
                that.series.map((it, index) => {
                  if (index == item.seriesIndex) {
                    // 索引要對(duì)上
                    that.unit = it.unit;
                  }
                });
                result +=
                  "<div style='height: 28px;line-height:28px'>" +
                  '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
                  item.color +
                  '"></span>' +
                  item.seriesName +
                  " : " +
                  item.value +
                  that.unit;
                ("</div>");
              });
              result += "</div>";
              return result;
            },
          },
          // 圖表使用的一系列數(shù)據(jù)
          series: that.series,
          // 圖表距容器的距離
          grid: {
            bottom: 60,
            left: "4%",
            right: "2%",
          },
          // 區(qū)域縮放配置
          dataZoom: [
            {
              type: "slider",
              start: 0,
              end: 50,
              backgroundColor: "#e9e9e9",
              fillerColor: "#666",
              opacity: 0.2,
              show: true,
              height: "24ph",
              bottom: "12ph",
            },
          ],
        });
        // 添加自適應(yīng)
        window.addEventListener("resize", this.resizeFn);
      });
    },
    // 自適應(yīng)函數(shù)
    resizeFn() {
      this.myChart.resize();
    },
  },
  beforeDestroy() { // 銷毀時(shí)候移除resize事件
    window.removeEventListener("resize", this.resizeFn);
  },
};
</script>
<style>
.echart_line {
  width: 900px;
  height: 600px;
  border: 1px dotted #159;
}
</style>