import echarts from 'echarts'

function chartLine(data) {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#dddc6b"
        }
      }
    },
    legend: {
      top: "20",
      textStyle: {
        color: "#fff",
        fontSize: "12"
      }
    },
    grid: {
      left: "20",
      top: "50",
      right: "20",
      bottom: "10",
      containLabel: true
    },
    xAxis: [{
        type: "category",
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        axisLine: {
          lineStyle: {
            color: "#fff"
          }
        },
        data: data.time
      },
      {
        axisPointer: {
          show: false
        },
        axisLine: {
          show: false
        },
        position: "bottom",
        offset: 0
      }
    ],
    yAxis: [{
      type: "value",
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
          fontSize: 12
        }
      },
      splitLine: {
        show: false
      }
    }],
    series: [{
        name: "环境湿度",
        type: "line",
        smooth: true,
        symbol: "circle", //标记的 图形
        symbolSize: 5,
        showSymbol: true,
        lineStyle: {
          normal: {
            color: "#39b6e6",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(61, 196, 241, 1)' // 0% 处的颜色
              }, {
                offset: 0.8,
                color: 'rgba(61, 196, 241, 0.2)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          normal: {
            color: "#39b6e6",
            borderColor: "#39b6e6",
            borderWidth: 2
          }
        },
        data: data.humidity
      },
      {
        name: "环境温度",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: true,
        lineStyle: {
          normal: {
            color: "#c71881",
            width: 2
          }
        },
        itemStyle: {
          normal: {
            color: "#c71881",
            borderColor: "#c71881",
            borderWidth: 2
          }
        },
        data: data.temperature
      }
    ]
  };
}

function chartBar(data) {
  return {
    color: ['RGB(1,255,152)', 'RGB(244,191,70)'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    animation: false,
    "grid": {
      "top": "67",
      "left": "10",
      "bottom": "0",
      "right": "10",
      "containLabel": true
    },
    "legend": {
      "show": true,
      top: 15,
      textStyle: {
        color: "RGB(193,223,255)"
      }
    },
    "xAxis": [{
      "type": "category",
      "data": data.time,
      "axisTick": {
        "alignWithLabel": true
      },
      "nameTextStyle": {
        "color": "#fff"
      },
      "axisLine": {
        "lineStyle": {
          "color": "RGB(47,68,114)"
        }
      },
      "axisLabel": {
        "textStyle": {
          "color": "#bfe2f8"
        },
        margin: 20
      }
    }],
    "yAxis": [{
      "type": "value",
      "axisLabel": {
        "textStyle": {
          "color": "#bfe2f8"
        },
        "formatter": "{value}"
      },
      "splitLine": {
        "show": false,
      },
      "axisLine": {
        "show": true,
        "lineStyle": {
          "color": "RGB(47,68,114)"
        }
      }
    }],
    "series": [{
        name: '保温仓当前温度',
        type: 'line',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00b8f6' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#006aec' // 100% 处的颜色
            }], false)
          }
        },
        "data": data.pre_temp
      },
      {
        name: '保温仓设定温度',
        type: 'line',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#d4b407' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#da9700' // 100% 处的颜色
            }], false)
          }
        },

        "data": data.set_temp
      }
    ]
  };
}

function gauge(num, per, color01, color02, title) {
  // var value = 40
  // var colorRegionRate = (value / 100).toFixed(2)
  return {
    title: {
      text: title,
      x: 'center',
      top: 26,
      textStyle: {
        fontWeight: 'normal',
        fontSize: 16,
        color: '#9ad9fa'
      },
    },
    series: [{
      type: 'gauge',
      radius: '80%',
      center: ['50%', '60%'],
      splitNumber: 0, //刻度数量
      startAngle: 225,
      endAngle: -45,
      axisLine: {
        show: true,
        lineStyle: {
          width: 15,
          color: [
            // 有数值的部分
            [per, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: color01 // 0% 处的颜色
              },
              {
                offset: 1,
                color: color02 // 100% 处的颜色
              }
            ])],
            // 底色
            [
              1, '#00323C'
            ]
          ],
        },
        radius: 8,
      },
      title: {
        x: 'center',
        top: 50,
        textStyle: {
          fontWeight: 'normal',
          fontSize: 30,
          color: color02
        },
      },
      //分隔线样式。
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false,
      },
      //仪表盘详情，用于显示数据。
      detail: {
        show: true,
        offsetCenter: [0, '0%'],
        color: color02,
        size: 20,
        textStyle: {
          fontSize: 20
        },
        formatter: function (params) {
          return params + '台'
        },
      },
      data: [{
        value: num,
        name: per * 100 + '%'
      }]
    }]
  };
}
export {
  chartLine,
  chartBar,
  gauge
}