<template>
  <!-- 染损报表 所有供应商染损 -->
  <div id="allLossChart" :style="{ width: '100%', height: '600px' }"></div>
</template>

<script>
import * as echarts from 'echarts' //必须有

import { allLoss } from '@api/reportForms/dye-loss-table.js'
export default {
  name: 'AllLossChart', // 所有供应商染损分析图
  data() {
    return {
      // newData: {
      cvenNameArr: [],
      dyeLossRateArr: []
      // }
    }
  },

  mounted() {
    this.getAllData()
  },
  methods: {
    // 1、先获取 chart 数据
    getAllData() {
      allLoss().then(res => {
        if (res.success) {
          if (res.result) {
            res.result.forEach(item => {
              this.cvenNameArr.push(item.cvenName)
              this.dyeLossRateArr.push(item.dyeLossRate)
            })
            console.log('供应商chart数组', this.cvenNameArr)
            console.log('对应染损chart数组', this.dyeLossRateArr)
          }
          // console.log('00')
        }
        //2、执行chart
        this.$nextTick(() => {
          this.initEcharts()
       
        })
      })
    },

    initEcharts() {
      const myChart = echarts.init(document.getElementById('allLossChart')) //dark ,深色主题
      // 配置
      const option = {
        title: {
          text: '所有供应商物料染损统计图',
          textStyle: {
            fontSize: 18,
            color: '#5470c6'
          }
        },
        tooltip: {
          textStyle: {
            fontSize: 18
            // color: '#5470c6'
          }
        },
        legend: {
          textStyle: {
            fontSize: 16,
            color: '#5470c6'
          },
          data: [
            {
              name: '染损(%)',
              icon: 'circle' // 图例的图标样式
            }
          ]
        },
        grid: {
          show: true, //是否显示直角坐标系网格。[ default: false ]
          left: '8%', // 组件离容器左侧的距离。
          right: '10px',
          borderColor: 'none', //网格的边框颜色
          bottom: '20%' //
        },

        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, //控制X轴刻度全部显示
            rotate: 30 //倾斜角度
          },

          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(84, 112, 198,0.05)', 'rgba(176, 177, 183,0.05)']
            }
          },
          data: this.cvenNameArr
        },
        yAxis: {
          type: 'value',
          name: '(%)'
        },
        series: [
          {
            name: '染损(%)',
            type: 'line',
            // 折现部门渐变色
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(216, 61, 65,0.5)' },
                  { offset: 0.5, color: 'rgba(216, 61, 65,0.2)' },
                  { offset: 1, color: 'rgba(216, 61, 65,0.08)' }
                ])
              }
            },
            smooth: true,
            data: this.dyeLossRateArr
          }
        ]
      }
      // 渲染
      myChart.setOption(option)

      window.addEventListener('resize', () => {
        if (myChart) {
          myChart.resize()
        }
      })
    }
  },

  watch: {
    // 3、监听数据变化
    newData: {
      deep: true,
      handler() {
        // 数据变化，执行
        const { cvenNameArr, dyeLossRateArr } = this.newData
        this.initEcharts(cvenNameArr, dyeLossRateArr)
        console.log('333')
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }

/deep/ .ant-table-footer .ant-table.body {
  // overflow: hidden !important;
}
/deep/ .ant-table.ant-table-bordered .ant-table-footer {
  border: none;
  padding: 0;
}

</style>
