<!--
 * @Author: your name
 * @Date: 2021-11-22 17:00:48
 * @LastEditTime: 2021-12-13 14:18:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorOneChart.vue
-->
<template>
  <div id="indicatorOneChart" class="indicator-one-chart"></div>
</template>
<script>
export default {
  props: {
    ifPositive: {
      type: Boolean,
      required: true,
    },
    id: {
      required: true,
    },
    data: {
      default: () => [],
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    init() {
      let color1 = "rgba(0, 255, 0, 0.7)";
      let color2 = "rgba(64, 218, 26, 0.5)";
      let color3 = "rgba(88, 165, 69, 0.3)";
      if (this.ifPositive) {
        color1 = "rgba(255, 0, 0, 0.7)";
        color2 = "rgba(216, 52, 52, 0.5)";
        color3 = "rgba(201, 85, 85, 0.3)";
      }
      let options = {
        grid: {
          top: "2%",
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          splitLine: {
            // 除开坐标轴的线
            show: true,
            lineStyle: {
              color: ["#ccc"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1,
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#ccc"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1,
            },
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            symbol: "none", // 隐藏拐点
            color: color1,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color1, // 100% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: color2, // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: color3, //   0% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      this.myChart.setOption(options);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(
      document.getElementById("indicatorOneChart")
    );
    this.init();
  },
  watch: {
    data(newValue) {
      console.log(newValue);
      this.init();
    },
  },
};
</script>
<style scoped>
.indicator-one-chart {
  width: 80%;
  height: 50%;
  margin-left: 5%;
}
</style>
