sen-yu-new-web/src/views/reportForms/dye-loss-table/someoneLossChart.vue

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

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

import { someoneLoss } from '@api/reportForms/dye-loss-table.js'
export default {
  name: 'SomeoneLossChart', // 指定供应商染损分析图
  data() {
    return {
      venName: '',
      colorArr: [],
      cinvNameArr: [],
      cinvNameColorArr: [],
      // newData: {
      // cvenNameArr: [],
      dyeLossRateArr: []
      // }
    }
  },

  mounted() {
    this.getSomeoneLossData()
  },
  methods: {
    // 1、先获取 chart 数据
    getSomeoneLossData() {
      someoneLoss({ venName: this.venName }).then(res => {
        if (res.success) {
          // console.log('this.venName', this.venName)
          // console.log('指定供应商返回数据', res.result)
          res.result.forEach(item => {
            this.cinvNameColorArr.push(item.cinvNameColor)
            this.dyeLossRateArr.push(item.dyeLossRate)
          })
          //截取指定下标数据
          this.cinvNameColorArr = this.cinvNameColorArr.slice(0, 10)
          this.dyeLossRateArr = this.dyeLossRateArr.slice(0, 10)
          console.log('物料+颜色chart数组', this.cinvNameColorArr)
          console.log('染损chart数组', this.dyeLossRateArr)

        }
        //2、执行chart
        this.$nextTick(() => {
          this.initEcharts()
          // console.log('111')
        })
      })
    },

    initEcharts() {
      const myChart = echarts.init(document.getElementById('someoneLossChart')) //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: '40%' //
        },

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

          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(84, 112, 198,0.04)', 'rgba(176, 177, 183,0.05)']
            }
          },
          data: this.cinvNameColorArr
        },
        yAxis: {
          type: 'value',
          name: '(%)'
        },
        series: [
          {
            name: '染损(%)',
            type: 'line',
            // 折现部门渐变色
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'blue' },
                  { offset: 0.5, color: 'rgba(148,235,113,0.3)' },
                  { offset: 1, color: 'rgba(148,235,113,0.1)' }
                ])
              }
            },
            smooth: true,
            data: this.dyeLossRateArr
          }
        ]
      }
      // 渲染
      myChart.setOption(option)
      //resize方法实现自动缩放
      window.addEventListener('resize', this.chart.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;
}
#myChart {
  h6 {
    font-size: 16px;
    font-weight: 700;
  }
}
</style>