import { brokenSymbol, state } from "../../enum";
import { getComVal, LinearGradient, RandomNumber } from "../echart-method";
import * as echarts from "echarts";
import { com } from "./common-config";

const detailTitle = ["1", "2", "3", "4", "5", "6", "7"];
const colorArr = [
  ["rgb(128, 255, 165)", "rgb(1, 191, 236)"],
  ["rgb(0, 221, 255)", "rgb(77, 119, 255)"],
  ["rgb(55, 162, 255)", "rgb(116, 21, 219)"],
  ["rgb(255, 0, 135)", "rgb(135, 0, 157)"],
  ["rgb(255, 191, 0)", "rgb(224, 62, 76)"],
];

/** 折线 */
export class Broken {
  /** 是否显示拐点 */
  static show_symbol = state.hide;
  /** 拐点形状 */
  static symbol = brokenSymbol.emptyCircle;
  /** 拐点大小 */
  static symbolSize = 6;

  /** 区间颜色设置 */
  static pieces_color() {
    return [
      {
        gt: 1,
        lt: 2,
        color: getComVal("color_data")[0],
      },
      {
        gt: 3,
        lt: 4,
        color: getComVal("color_data")[0],
      },
    ];
  }
  /**
   * 模拟数据处理
   * @param val 数据
   * @param type 数据类别（title - x轴坐标名称 color - 渐变色组）
   * @returns 处理好的数据
   */
  static handleParams(val: string[] | string[][] | undefined, type: string) {
    if (type == "title") {
      if (val) {
        return val;
      } else {
        return detailTitle;
      }
    }
    if (type == "color") {
      if (val) {
        return val;
      } else {
        return colorArr;
      }
    }
    if (type == "series") {
      if (val) {
        return val;
      } else {
        return com.week;
      }
    }
  }
  /**
   * 纵向渐变色
   * @param color 二维颜色组
   * @returns 处理好的渐变色值
   */
  static protraitGradient(color: string[]) {
    let colorArr: any[] = [];
    let j = color.length;
    for (let i = 0; i < color.length; i++) {
      colorArr.push({
        offset: (1 / j) * i,
        color: color[i],
      });
    }
    let c: any = new echarts.graphic.LinearGradient(0, 0, 0, 1, colorArr);
    return c;
  }
  /**
   * 生成单折线模拟数据
   * @param arr x轴坐标名称
   * @returns 单折线模拟数据
   */
  static getBrokenData(arr?: string[]) {
    let stochastic_data: any = {};
    let _arr = this.handleParams(arr, "series");
    _arr?.forEach((e: any) => {
      stochastic_data[e] = RandomNumber(
        Math.ceil(Math.random() * 1),
        Math.ceil(Math.random() * 10)
      );
    });

    return stochastic_data;
  }

  /**
   * 生成多折线模拟数据
   * @param arr 系列名称
   * @param length 长度
   * @returns 多折线模拟数据
   */
  static getMultiBrokenData(arr?: string[], length?: number) {
    let stochastic_data: any = {};
    let _arr = this.handleParams(arr, "series");
    _arr?.forEach((e: any) => {
      if (!length) {
        stochastic_data[e] = [
          RandomNumber(0, 100),
          RandomNumber(0, 100),
          RandomNumber(0, 100),
          RandomNumber(0, 100),
          RandomNumber(0, 100),
        ];
      } else {
        let tempArr: any[] = [];
        for (let i = 0; i < length; i++) {
          tempArr.push(RandomNumber(0, 100));
        }
        stochastic_data[e] = tempArr;
      }
    });

    return stochastic_data;
  }
  /**
   * 生成时间轴数组
   * @param dateRange 日期范围
   * @returns x轴数据
   */
  static getDateRange(dateRange: number) {
    let xData: any[] = [];
    let date = new Date();
    //今天加上前dateRange-1天
    for (let i = 0; i <= 24 * (dateRange - 1); i += 24) {
      let dateItem = new Date(date.getTime() - i * 60 * 60 * 1000); // 使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
      let y = dateItem.getFullYear(); // 获取年份
      let m = dateItem.getMonth() + 1; // 获取月份js月份从0开始，需要+1
      let d = dateItem.getDate(); //获取日期
      m = this.addDate0(m); // 给为单数的月份补零
      d = this.addDate0(d); // 给为单数的日期补零
      let valueItem = y + "-" + m + "-" + d; // 组合
      xData.push(valueItem); // 添加至数组
    }
    return xData;
  }
  /**
   * 给日期加0
   * @param time 时间
   * @returns 处理好的时间
   */
  static addDate0(time: any) {
    if (time.toString().length == 1) {
      time = "0" + time.toString();
    }
    return time;
  }
  /**
   * 折线图0
   * @param data 模拟数据
   * @returns 折线图0配置项
   */
  static broken0(data: any) {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      color: getComVal("color_data")[0],
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 标题 */
      title: {},
      /** 图例 */
      legend: {},
      xAxis: {
        boundaryGap: false,
        name: "X",
        type: "category",
        data: Object.keys(data),
        /** 分割线 */
        splitLine: {
          show: getComVal("splitLine_X_show") as boolean,
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color") as echarts.Color,
            width: getComVal("splitLine_X_width") as number,
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show") as boolean,
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color") as echarts.Color,
            width: getComVal("splitLine_Y_width") as number,
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "line",
          label: {
            show: true,
            /** 文字显示位置 */
            position: "top",
            color: getComVal("font_color"),
          },
          showSymbol: this.show_symbol,
          symbol: this.symbol,
          symbolSize: this.symbolSize,
        },
      ],
    };
    return option;
  }
  /**
   * 折线图1
   * @param data 模拟数据
   * @param colorArr 线条渐变颜色组
   * @returns 折线图1配置项
   */
  static broken1(data: any, colorArr?: string[]) {
    let arr = colorArr ? colorArr : getComVal("color_data");
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor") as echarts.Color,
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 标题 */
      title: {},
      /** 图例 */
      legend: {},
      xAxis: {
        boundaryGap: false,
        type: "category",
        data: Object.keys(data),
        splitLine: {
          show: getComVal("splitLine_X_show") as boolean,
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color") as echarts.Color,
            width: getComVal("splitLine_X_width") as number,
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      yAxis: {
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show") as boolean,
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color") as echarts.Color,
            width: getComVal("splitLine_Y_width") as number,
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          name: "销量",
          type: "line",
          data: Object.values(data),
          itemStyle: {
            color: LinearGradient(arr),
          },
          showSymbol: this.show_symbol,
          symbol: this.symbol,
          symbolSize: this.symbolSize,
        },
      ],
    };
    return option;
  }
  /**
   * 折线图2
   * @param data 模拟数据
   * @returns 折线图2配置项
   */
  static broken2(data: any) {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 标题 */
      title: {},
      /** 图例 */
      legend: {},
      xAxis: {
        boundaryGap: false,
        type: "category",
        data: Object.keys(data),
        splitLine: {
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      visualMap: {
        type: "piecewise",
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: this.pieces_color(),
      },
      yAxis: {
        type: "value",
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "line",
          lineStyle: {
            color: getComVal("color_data")[0],
            width: 2,
          },
          markLine: {
            symbol: ["none", "none"],
            label: { show: true },
            /** 条纹线条 */
            data: [{ xAxis: 1 }, { xAxis: 2 }, { xAxis: 3 }],
          },
          areaStyle: {},
          showSymbol: this.show_symbol,
          symbol: this.symbol,
          symbolSize: this.symbolSize,
        },
      ],
    };
    return option;
  }
  /**
   * 折线图3
   * @param data 模拟数据
   * @returns 折线图3配置项
   */
  static broken3(data: any) {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 颜色 */
      color: getComVal("color_data")[0],
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 图例 */
      legend: {},
      /** 标题 */
      title: {},
      xAxis: {
        boundaryGap: false,
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: {
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "line",
          areaStyle: {
            color: getComVal("color_data")[0],
            origin: "start",
          },
          showSymbol: this.show_symbol,
          symbol: this.symbol,
          symbolSize: this.symbolSize,
        },
      ],
    };
    return option;
  }
  /**
   * 折线图4
   * @param data 模拟数据
   * @param gradientColor 区域渐变颜色组
   * @returns 折线图4配置项
   */
  static broken4(data: any, gradientColor?: string[]) {
    // 区域渐变颜色组
    let _gradientColor = gradientColor
      ? gradientColor
      : getComVal("color_data");

    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 线条 */
      color: "black" as echarts.Color,
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 标题 */
      title: {},
      /** 图例 */
      legend: {},
      xAxis: {
        boundaryGap: false,
        name: "X",
        type: "category",
        data: Object.keys(data),
        /** x轴分割线 */
        splitLine: {
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      yAxis: {
        name: "Y",
        type: "value",
        /** y轴分割线 */
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "line",
          areaStyle: {
            color: LinearGradient(_gradientColor),
            origin: "start",
          },
          showSymbol: this.show_symbol,
          symbol: this.symbol,
          symbolSize: this.symbolSize,
        },
      ],
    };
    return option;
  }
  /**
   * 折线图5
   * @param data 模拟数据
   * @param gradientColor 区域渐变颜色组
   * @returns 折线图5配置项
   */
  static broken5(data: any, gradientColor: string[]) {
    let _gradientColor = gradientColor
      ? gradientColor
      : getComVal("color_data");
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 线条颜色 */
      color: getComVal("color_data"),
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      /** 标题 */
      title: {},
      /** 图例 */
      legend: {},
      xAxis: {
        boundaryGap: false,
        name: "X",
        type: "category",
        data: Object.keys(data),
        splitLine: {
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
      },
      yAxis: {
        name: "Y",
        type: "value",
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: [
        {
          data: Object.values(data),
          type: "line",
          stack: "Total",
          /** 圆弧形状 */
          smooth: true,
          /** 线条样式 */
          lineStyle: {
            /** 线条宽度 */
            width: 0,
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: LinearGradient(_gradientColor),
              global: false,
            },
            origin: "start",
          },
          emphasis: {
            focus: "series",
          },
          showSymbol: this.show_symbol,
          symbol: this.symbol,
          symbolSize: this.symbolSize,
        },
      ],
    };
    return option;
  }
  /**
   * 折线图6
   * @returns 折线图6配置项
   */
  static broken6() {
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 提示框 */
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          animation: false,
          label: {
            backgroundColor: "#ccc",
            borderColor: "#aaa",
            borderWidth: 1,
            shadowBlur: 0,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            color: "#222",
          },
        },
      },
      /** 标题 */
      title: {},
      /** 图例 */
      legend: {},
      xAxis: {
        type: "category",
        data: this.getDateRange(90).reverse(),
        axisLabel: {},
        boundaryGap: false,
      },
      yAxis: {
        axisLabel: {},
        axisPointer: {
          label: {},
        },
        splitNumber: 5,
      },
      series: [
        {
          name: "L",
          type: "line",
          data: [
            0.3982670977999998, 1.6833036365, 2.1287778695, 2.3458167992,
            2.4777322093, 2.5565719465, 2.6456042288, 2.6660088505,
            2.7048160059, 2.7035604199, 2.7704556241000002, 2.7773623582,
            2.7979520151, 2.7957951963, 2.8162736828, 2.863389992, 2.8430011353,
            2.8589659708, 2.8561346310999998, 2.8708024645, 2.866027521,
            2.8730733414, 2.8716521617, 2.8428827802, 2.8902645583,
            3.0333682152, 2.9931527033, 2.8925718238, 2.9094802158, 2.915680144,
            2.9085643219, 2.8830185255, 2.9643160742, 2.9441287137,
            2.9292856612, 2.8281898665, 2.8118725935, 2.8268096679,
            2.8229626183, 2.8497520389, 2.8381305555, 2.8409147023, 3.063624221,
            3.1553854927, 3.2055952772, 2.9373533002, 2.9132405945,
            2.8838290871, 2.8440240952, 2.8395635362, 2.8430976805,
            2.9217012436, 2.8896126192, 2.8910355503, 2.8926150773,
            2.8879701845, 2.8923158881, 2.8903008592, 2.9059386187,
            2.9093189544999998, 2.9158694322, 2.9113276251, 2.9076518392,
            2.9062236957, 2.9192971999, 2.9259998677, 2.9179569706,
            2.9245886175, 2.9249372941, 2.9336515858, 2.9206829549,
            2.9153876107, 2.9197331672, 2.9376260306, 2.9180444092,
            2.9254556623, 2.9342292845, 2.9382004983, 2.9402302151,
            2.9410873217, 2.9232894553, 2.9407763528, 2.916470056, 2.8913577471,
            2.9118365122, 2.9192649771, 2.910004207, 2.910533519, 2.909486646,
            2.9092848708, 3.1537781522,
          ],
          lineStyle: {
            opacity: 0,
          },
          stack: "confidence-band",
          symbol: "none",
        },
        {
          name: "U",
          type: "line",
          data: [
            2.8967046779000003, 1.4491049982, 0.9668634870999999, 0.7258952249,
            0.5816866709999999, 0.4853494, 0.4167718883, 0.3652780785,
            0.3253602494, 0.29345747969999997, 0.2674476879,
            0.24660966010000002, 0.22799691960000001, 0.2119911843,
            0.19751615779999998, 0.188013836, 0.1772255058, 0.1683750477,
            0.16040993730000003, 0.1524436508, 0.1456478711, 0.1398989877,
            0.13398499989999998, 0.12594933700000002, 0.12384864790000001,
            0.180702727, 0.1169753536, 0.1106951125, 0.1069448137, 0.1036518025,
            0.1008793037, 0.0973219235, 0.0967551764, 0.0904872944,
            0.0860042654, 0.08318302779999999, 0.0809116093,
            0.10880889810000001, 0.2771231087, 0.2253627713, 0.2500147927,
            0.2462733265, 0.1818859377, 0.203013617, 0.17562100509999998,
            0.0663809955, 0.0643802981, 0.06269200050000001, 0.0912763956,
            0.10018022620000001, 0.0990893558, 0.028098839, 0.0971742497,
            0.1320028694, 0.1091139664, 0.129358271, 0.1624775084, 0.1657547211,
            0.136613142, 0.1303694838, 0.118135569, 0.1280991019,
            0.13622071819999998, 0.1397761598, 0.114185217, 0.10202655969999999,
            0.11472014189999999, 0.1049026402, 0.1047563129, 0.0877568198,
            0.11483302779999999, 0.125592095, 0.1176554629, 0.0818658387,
            0.12029133980000001, 0.10515369690000001, 0.08849777739999999,
            0.0814542884, 0.0789530192, 0.0775536225, 0.1137397899,
            0.0790417924, 0.129810853, 0.1199467174, 0.1330203143,
            0.12609499629999998, 0.1458287499, 0.1444856197, 0.147586668,
            0.14686304039999998, 0.19616917940000003,
          ],
          lineStyle: {
            opacity: 0,
          },
          areaStyle: {
            color: getComVal("color_data")[0],
          },
          stack: "confidence-band",
          symbol: "none",
        },
        {
          name: "A",
          type: "line",
          data: [
            1.8381573741, 2.4171752707, 2.6209229364, 2.7207073998,
            2.7538834531, 2.7982645863, 2.8542523129, 2.997389027, 2.9919307266,
            2.9703509067, 3.001317397, 2.9882350162, 3.0059394263, 2.9884434102,
            3.0041183019, 3.0353559544, 3.0070046011, 2.9995748193,
            2.9964538977, 3.007797889, 3.0025402723, 2.994682619, 2.9924158479,
            2.9608611279, 3.0075430252, 3.1850284663, 3.076629596, 2.9685707729,
            2.9767391326, 2.98031385, 2.9689803184, 2.9241253033, 3.0233974572,
            3.011073579, 2.997905178, 2.8916292904, 2.8901741028, 2.9127029703,
            2.9238007953, 2.9583345751, 2.9589871038, 2.9785710958,
            3.2430880604, 3.3472823479000002, 3.3360734074, 2.9536351645,
            2.9132990621, 2.8711327174, 2.8525573179, 2.8497594934,
            2.8796234471, 2.9350877081, 2.984474438, 2.993948643, 3.0003154213,
            2.9936981702, 2.995705166, 2.9946599168, 3.0070057212, 3.0082121656,
            3.0141422884, 3.0041613553, 2.9986385713, 2.9947855067,
            3.0078904741, 3.0099598702, 3.0001146029, 3.0047572651, 3.006204557,
            3.0115231406, 2.9967365006, 2.9891014548, 2.9907233187,
            3.0095972086, 2.9888190642, 2.9976427704, 3.0084213775,
            3.0107446453, 3.009457792, 3.0031194779, 2.9884871787, 3.0058347339,
            2.9764369564, 2.9520204036, 2.9781815641, 2.9928638828,
            2.9848033088, 2.9902215145, 2.9904318505, 2.9965834085,
            3.3297981389,
          ],
          itemStyle: {
            color: getComVal("color_data")[0],
          },
          symbol: "none",
        },
      ],
    };
    return option;
  }
  /**
   * 多折线0
   * @param data 模拟数据
   * @param dataTitle x轴
   * @param color 颜色组
   * @returns 多折线0配置项
   */
  static multiBroken0(data: any, dataTitle?: string[], color?: string[][]) {
    let legendData: any[] = [];
    let multiBroken0_series: any = [];
    let _color: any = this.handleParams(color, "color");
    let _dataTitle = this.handleParams(dataTitle, "title");
    Object.keys(data).forEach((a, b) => {
      let obj: any = {
        name: a,
        type: "line",
        stack: "Total",
        color: "#23d8e7",
        data: data[a],
        /** 是否显示拐点 */
        showSymbol: this.show_symbol,
        symbol: this.symbol,
        symbolSize: this.symbolSize,
      };
      if (_color[b]) {
        obj.color = _color[b][0];
      }
      multiBroken0_series.push(obj);
      legendData.push(a);
    });
    const option: any = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 标题 */
      title: {},
      /** 图例 */
      legend: {
        data: legendData,
        top: "3%",
      },
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      xAxis: {
        type: "category",
        data: _dataTitle,
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
        boundaryGap: false,
      },
      yAxis: {
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: multiBroken0_series,
    };

    return option;
  }
  /**
   * 多折线1
   * @param data 模拟数据
   * @param dataTitle x轴
   * @param gradientColor 颜色组
   * @returns 多折线1配置项
   */
  static multiBroken1(data: any, dataTitle?: string[], color?: string[][]) {
    let legendData: any[] = [];
    let multiBroken1_series: any = [];
    let _dataTitle = this.handleParams(dataTitle, "title");
    let _color: any = this.handleParams(color, "color");

    Object.keys(data).forEach((a, b) => {
      let obj: any = {
        name: a,
        type: "line",
        stack: "Total",
        color: "#23d8e7",
        data: data[a],
        /** 是否显示拐点 */
        showSymbol: this.show_symbol,
        symbol: this.symbol,
        symbolSize: this.symbolSize,
        areaStyle: {
          opacity: 0.8,
          color: this.protraitGradient(["#23d8e7", "#23d8e7"]),
        },
      };
      if (_color[b]) {
        obj.color = _color[b][0];
        obj.areaStyle.color = this.protraitGradient(_color[b] as string[]);
      }
      multiBroken1_series.push(obj);
      legendData.push(a);
    });
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 图例 */
      legend: {
        data: legendData,
        top: "3%",
      },
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      xAxis: {
        type: "category",
        data: _dataTitle,
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
        boundaryGap: false,
      },
      yAxis: {
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: multiBroken1_series,
    };

    return option;
  }

  /**
   * 多折线2
   * @param data 模拟数据
   * @param dataTitle x轴
   * @param color 颜色组
   * @returns 多折线2配置项
   */
  static multiBroken2(data: any, dataTitle?: string[], color?: string[][]) {
    let legendData: any[] = [];
    let multiBroken2_series: any[] = [];
    let _dataTitle = this.handleParams(dataTitle, "title");
    let _color: any = this.handleParams(color, "color");

    Object.keys(data).forEach((a, b) => {
      let obj: any = {
        name: a,
        type: "line",
        stack: "Total",
        color: "#23d8e7",
        smooth: true,
        data: data[a],
        /** 是否显示拐点 */
        showSymbol: this.show_symbol,
        symbol: this.symbol,
        symbolSize: this.symbolSize,
        areaStyle: {
          opacity: 0.8,
          color: this.protraitGradient(["#23d8e7", "#23d8e7"]),
        },
      };
      if (_color[b]) {
        obj.color = _color[b][0];
        obj.areaStyle.color = this.protraitGradient(_color[b] as string[]);
      }
      multiBroken2_series.push(obj);
      legendData.push(a);
    });
    const option = {
      /** 背景颜色 */
      backgroundColor: getComVal("backgroundColor"),
      /** 绘图网格 */
      grid: getComVal("grid"),
      /** 图例 */
      legend: {
        data: legendData,
        top: "3%",
      },
      /** 提示框 */
      tooltip: getComVal("tooltip"),
      xAxis: {
        type: "category",
        data: _dataTitle,
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_X_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_X_color"),
            width: getComVal("splitLine_X_width"),
            type: getComVal("splitLine_X_type"),
          },
        },
        boundaryGap: false,
      },
      yAxis: {
        splitLine: {
          /** 是否显示 */
          show: getComVal("splitLine_Y_show"),
          /** 线条风格 */
          lineStyle: {
            color: getComVal("splitLine_Y_color"),
            width: getComVal("splitLine_Y_width"),
            type: getComVal("splitLine_Y_type"),
          },
        },
      },
      series: multiBroken2_series,
    };
    return option;
  }
}
