<template>
  <div class="mod-demo-echarts">
    <div :id="chartLineName" class="chart-box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
//import testdata from './testdata'
export default {
  props: {
    title: {
      type: String,
    },
    chartLineName: {
      type: String,
      default: "echartLine",
    },
    yName: {
      type: String,
    },
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      ruleList: [
        "违反规则一：控制图上有 1 个点位于三倍标准差以外",
        "违反规则二：连续 9 点落在中心线的用一侧",
        "违反规则三：连续 6 点递增或者递减",
        "违反规则四：连续 14 点中 相邻点 交替上下",
        "违反规则五：连续 3 点中 有 2 点 落在中心线同一侧，B区以外",
        "违反规则六：连续 5 点中 有 4点 落在中心线同一侧，C区以外",
        "违反规则七：连续 15 点 落在中心线两侧的C区内",
        "违反规则八：连续 8 点 落在中心线两侧，且无一点在C区内",
        "违反规则九：有 1 点落在规格线以外",
        "违反规则十：CPK小于目标值",
      ],
      //testdata
    };
  },
  mounted() {},
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize();
    }
  },
  methods: {
    // 折线图
    initChartLine() {
      var option = {
        title: {
          text: this.title,
        },
        legend: {
          data: [this.title, "LCL", "CL", "UCL"],
        },
        tooltip: {
          // 悬浮提示框
          trigger: "axis",
          boundaryGap: false,
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter: (e) => {
            return `
               点位坐标: ${e[0].data.position}<br/>
               ${e[0].marker} 数值: ${e[0].data.value}<br/>
               ${e[0].marker} 规格: ${e[0].data.sl}<br/>
               ${e[0].marker} 名称:${e[0].data.name}
                `;
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          // 折线图内边距
          left: "3%",
          right: "4%",
          bottom: "7%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dataList.map((item) => {
              return item.name;
            }),
        },
        yAxis: {
          type: "value",
          name: this.yName,
          axisLine: {
            show: true,
            lineStyle: {
              //color: colors[2]
            },
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            formatter: "{value}",
          },
        },
        dataZoom: [
          // 轴放大
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: 0,
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: 0,
          },
        ],
        series: [
          {
            name: this.title,
            type: "line",
            lineStyle: {
              color: "#5470c6",
            },
            markArea: {
              // 以y轴分割的区域
              silent: false,
              data: [
              ],
            },
            data: this.dataList.map((item) => {
              const obj = {
                position: item.position,
                value: item.value,
                name: item.name,
                sl:`ucl-${item.controlLimit.ucl.toFixed(2)} cl-${item.controlLimit.cl.toFixed(2)} lcl-${item.controlLimit.lcl.toFixed(2)} `
              };
              return obj;
            }),
          },
          {
            name: "LCL",
            type: "line",
            step: "middle",
            showSymbol: false,
            lineStyle: {
              color: "#91cc75",
            },
            endLabel: {
              formatter: "LCL",
              show: true,
            },
            data: this.dataList.map((item) => {
              const obj = {
                position: item.position,
                value: item.controlLimit.lcl,
                name: item.name,
              };
              return obj;
            }),
          },
          {
            name: "CL",
            type: "line",
            step: "middle",
            showSymbol: false,
            lineStyle: {
              color: "#ee6666",
            },
            endLabel: {
              formatter: "CL",
              show: true,
            },
            data: this.dataList.map((item) => {
              const obj = {
                position: item.position,
                value: item.controlLimit.cl,
                name: item.name,
              };
              return obj;
            }),
          },
          {
            name: "UCL",
            type: "line",
            step: "middle",
            showSymbol: false,
            lineStyle: {
              color: "#fac858",
            },
            endLabel: {
              formatter: "UCL",
              show: true,
            },
            data: this.dataList.map((item) => {
              const obj = {
                position: item.position,
                value: item.controlLimit.ucl,
                name: item.name,
              };
              return obj;
            }),
          },
        ],
      };
      this.chartLine = echarts.init(document.getElementById(this.chartLineName));
      this.chartLine.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
  },
};
</script>

<style lang="scss">
.mod-demo-echarts {
  .chart-box {
    min-height: 700px;
    margin-top: 20px;
  }
}
</style>
