var echarts = require("echarts");
let chartLeft1 = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    left: "0%",
    top: "35px",
    right: "0%",
    bottom: "1%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: [
        "一层",
        "二层",
        "三层",
        "四层",
        "五层",
        "六层",
        "七层",
        "八层"
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 1,
          type: "solid"
        }
      },

      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      type: "bar",
      label: {
        show: true,
        position: 'top',
        color: "white",
        fontSize: 13
      },
      data: [],
      barWidth: "35%",
      itemStyle: {
        normal: {
          color: "#2f89cf",
          opacity: 1,
          barBorderRadius: 5
        }
      }
    }
  ]
};


let chartLeft2 = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    left: "0%",
    top: "40px",
    right: "0%",
    bottom: "1%",//4%
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: [
        "一号位",
        "二号位",
        "三号位",
        "四号位",
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 1,
          type: "solid"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    },
    {
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ], series: [
    {
      type: "bar",
      name: "左侧",
      data: [],
      barWidth: "25%",
      label: {
        show: true,
        position: 'top',
        color: "white",
        fontSize: 15
      },
      itemStyle: {
        normal: {
          color: "#2f89cf",
          opacity: 1,
          barBorderRadius: 5,
          formatter: function (params) {
            return "11";
          }
        }
      }
    }, {
      label: {
        show: true,
        position: 'top',
        color: "white",
        fontSize: 15
      },
      type: "bar",
      name: "右侧",
      data: [],
      barWidth: "25%",
      itemStyle: {
        normal: {
          color: "#46d000",
          opacity: 1,
          barBorderRadius: 5
        }
      }
    }
  ]
};

let chartLeft3 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: "0%",
    top: "-5px",
    right: "9%",
    bottom: "4%",
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,.1	)",
        width: 1,
        type: "solid"
      }
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)"
      }
    }
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      show: true,
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,.1	)",
        width: 1,
        type: "solid"
      }
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)"
      }
    },
    data: ['不合格数', '合格数', '待测量数', '总数',]
  },
  series: [
    {
      name: '',
      type: 'bar',
      stack: '',
      label: {
        show: true,
        color: "white",
        position: 'right'//insideRight
      },
      barWidth: "55%",
      itemStyle: {
        normal: {
          color: "#2f89cf",
          opacity: 1,
          barBorderRadius: 5
        }
      },
      data: []
    }
  ]
};

let chartRight1 = {
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },

  color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
  legend: {
    top: "0%",
    icon: "roundRect",
    data: ["入库统计", "压装统计", "测量统计"],
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12"
    }
  },
  toolbox: {
    feature: {}
  },
  grid: {
    left: "10",
    top: "20",
    right: "10",
    bottom: "10",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      },
      data: []
    }
  ],
  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      minInterval: 60,
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },

      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      name: "入库统计",
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#45d4ba",
        width: 1
      }, //线条的样式
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#83cddc"
          },
          {
            offset: 1,
            color: "#bfdffbb5"
          }
        ])
      },
      data: []
    },
    {
      name: "压装统计",
      type: "line",

      smooth: true,
      lineStyle: {
        color: "#04a710",
        width: 1
      }, //
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#0cbf22"
          },
          {
            offset: 1,
            color: "#b8f7d1b5"
          }
        ])
      },
      data: []
    },
    {
      name: "测量统计",
      type: "line",

      lineStyle: {
        color: "#0864c3",
        width: 1
      }, //线条的样式
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#29d7ff"
          },
          {
            offset: 1,
            color: "#34ccef85"
          }
        ])
      },
      data: []
    }
  ]
};

var gauge = {
  series: [{
    radius: '90%',
    type: 'gauge',
    startAngle: 180,
    endAngle: 0,
    min: 0,
    max: 1,
    splitNumber: 8,
    axisLine: {
      lineStyle: {
        width: 3,
        color: [
          [0.25, '#FF6E76'],
          [0.5, '#FDDD60'],
          [0.75, '#58D9F9'],
          [1, '#7CFFB2']
        ]
      }
    },
    pointer: {
      icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
      length: '12%',
      width: 20,
      offsetCenter: [0, '-60%'],
      itemStyle: {
        color: 'auto'
      }
    },
    axisTick: {
      length: 12,
      lineStyle: {
        color: 'auto',
        width: 2
      }
    },
    splitLine: {
      length: 20,
      lineStyle: {
        color: 'auto',
        width: 5
      }
    },
    axisLabel: {
      color: '#464646',
      fontSize: 20,
      distance: -60,
      formatter: function (value) {
        if (value === 0.875) {
          return '优';
        }
        else if (value === 0.625) {
          return '中';
        }
        else if (value === 0.375) {
          return '良';
        }
        else if (value === 0.125) {
          return '差';
        }
      }
    },
    title: {
      offsetCenter: [0, '-20%'],
      fontSize: 20
    },
    detail: {
      fontSize: 30,
      offsetCenter: [0, '0%'],
      valueAnimation: true,
      formatter: function (value) {
        return Math.round(value * 100) + '分';
      },
      color: 'auto'
    },
    data: [{
      value: 0.70,
      name: '成绩评定'
    }]
  }]
}

let branchTotal = 100;
let press = 30;
let colorType = 0;
let option = {
  backgroundColor: '',
  series: [
    {
      type: 'pie',
      clockwise: false, // 逆时针
      hoverAnimation: false,
      radius: ['10%', '20%'],
      label: {
        show: false
      },
      itemStyle: {
        color: function (params) {
          let colorList1 = ['#47C9E5', '#47E4E5'];
          let colorList2 = ['#832BF3', '#2B8EF3'];
          return new echarts.graphic.LinearGradient(0, 0, 0.5, 1, [
            { offset: 0, color: colorList1[colorType] },
            { offset: 1, color: colorList2[colorType] }
          ]);
        },
        borderRadius: 0, // 设置所有圆角
        // barBorderRadius: [50, 50, 0, 0]
      },
      data: [
        {
          value: press,
          label: {
            show: true,
            position: 'center',
            formatter: '{d|{d}}%',
            rich: {
              d: {
                fontSize: 12,
                color: '#fff'
              }
            },
            color: '#fff'
          },
          itemStyle: {
            borderRadius: 0, // 设置当前单个占比圆角
            shadowColor: '#2a2a34'
          }
        },
        {
          value: branchTotal - press,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            normal: {
              color: '#525252'
            }
          }
        }
      ]
    }
  ]
};

export { chartLeft1, chartLeft2, chartLeft3, chartRight1, gauge, option }