<!--
 * @Author: your name
 * @Date: 2021-11-22 15:10:07
 * @LastEditTime: 2021-11-22 15:55:38
 * @LastEditors: Please set LastEditors
 * @Description: 指标图
 * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorChart.vue
-->
<template>
  <div :id="id + 'indicator'" class="indicator-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: '0',
          right: '0',
          bottom: '-20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        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(this.id + 'indicator'));
    this.init();
  },
  watch: {
    data(newValue) {
      console.log(newValue)
      this.init()
    }
  }
}
</script>
<style scoped>
  .indicator-chart{
    width: 100%;
    height: 100%;
  }
</style>
