<!-- 温度折线图 -->
<template>
  <div>
    <boxTop :title="title" />
    <div class="weatherBox" :style="{ width: barWidth }">
      <div class="chartsdom" id="weather"></div>
    </div>
  </div>
</template>

<script>
import boxTop from '@/components/boxTop/index.vue'
export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  props: {
    area: {
      type: Array,
    },
    dataArray: {
      type: Object,
    },
    barWidth: {
      type: String,
      default: `401px`,
    },
    title: {
      type: String,
      default: ``,
    },
    unit: {
      type: String,
    },
    alertValue: {
      type: Number,
      default: 100,
    },
  },
  components: {
    boxTop,
  },
  mounted() {
    this.getEchart()
  },
  watch: {
    dataArray() {
      this.getEchart()
    },
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(`weather`))
      let visualMap = []
      let upColor = [`red`] // 超出标准线折线图的颜色
      let lineColor = [`#17E2CD`] // 折线图颜色
      lineColor.map((item, index) => {
        visualMap.push({
          type: `piecewise`,
          show: false,
          dimension: 1,
          seriesIndex: index,
          pieces: [
            {
              gt: this.alertValue,
              color: upColor[index], // 超过部分的颜色
            },
            {
              lt: 0,
              color: lineColor[index], // 未超出标准线颜色
            },
          ],
          outOfRange: {
            // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
            color: lineColor[index],
          },
        })
      })
      this.option = {
        // 悬浮框
        tooltip: {
          trigger: `axis`,
          axisPointer: {
            type: `shadow`,
          },
          backgroundColor: `rgba(0,0,0,0.8)`,
          borderColor: `rgba(255,255,255,0.3)`,
          textStyle: {
            fontSize: 20,
            color: `#fff`,
          },
          formatter: function (params) {
            return [
              params[0].axisValueLabel,
              params[0].value +
                `℃` +
                `<i style="padding:0 12px"></i> ` +
                params[1].value,
            ].join(`<br>`)
          },
        },
        // 图例
        legend: {
          data: [`CO`, `Co2`],
        },
        grid: {
          left: 50,
          right: 20,
          top: 40,
          bottom: 20,
        },
        // x轴
        xAxis: {
          type: `category`,
          axisLabel: {
            formatter: `{value}`,
            color: `#c7d6f2`,
            fontSize: `12px`,
            fontFamily: `Microsoft YaHei`,
          },

          boundaryGap: true,
          data: this.area,
          axisTick: {
            show: false,
          },
        },
        // y轴
        yAxis: {
          type: `value`,
          name: this.unit,
          axisLabel: {
            textStyle: {
              color: `#65ABE7`,
            },
          },
          nameTextStyle: {
            color: `#65ABE7`,
            fontSize: 12,
            lineHeight: 20,
          },
        },
        // 超出标准线颜色
        visualMap: visualMap,
        color: lineColor,
        // 数据
        series: [
          {
            data: this.dataArray.temperature,
            connectNulls: true,
            type: `line`,
            symbolSize: 0,
            // 标记线
            markLine: {
              symbol: `none`,
              silent: true,
              lineStyle: {
                color: `red`,
              },
              data: [
                {
                  yAxis: this.alertValue,
                  label: {
                    position: `end`, // 文字位置
                    formatter: ``, // 文字
                    color: `red`, // 文字颜色
                  },
                },
              ],
            },
          },
          {
            data: this.dataArray.Weather,
            type: `line`,
          },
        ],
      }
      myChart.setOption(this.option, true)
    },
  },
  beforeDestroy() {},
}
</script>

<style lang="less" scoped>
.weatherBox {
  width: 401px;
  height: 234px;

  .chartsdom {
    width: 100%;
    height: 100%;
  }
}
</style>
