sen-yu-new-web/src/views/reportForms/order-statistics/chart/external/departmentChart.vue

<template>
  <!--  部门统计图  外部 报表 订单统计   -->
  <div id="departmentChart" :style="{ width: '100%', height: '500px' }"></div>
</template>

<script>
import * as echarts from 'echarts'

import { depChart } from '@api/reportForms/order-statistics.js'

export default {
  name: 'DepartmentChart', // 部门统计图
  data() {
    return {
      queryParam: {
        vendorType: '外部'
        // customer: '', //客户
        // endYearMonth: '',
        // startYearMonth: '',
        // cdepName: ''
      },
      // newData: {
      cdepNameArr: [], //部门 数组
      iquantityArr: [], //实际数量
      inatMoneyArr: [] //本币金额
      // }
    }
  },

  mounted() {
    // this.getDepChartData()
  },
  created() {
    // 初次加载当月
    this.firstDepData()
  },
  methods: {
    // 初次加载
    firstDepData() {
      this.$nextTick(() => {
        //let nowDate = new Date()
        //let date = {
        //  year: nowDate.getFullYear(),
        //  month: nowDate.getMonth() + 1
        //}
        //if (date.month >= 1 && date.month <= 9) {
        //  date.month = '0' + date.month
        //}
        //var time = date.year + '-' + date.month

        //this.queryParam.startYearMonth = time
        //this.queryParam.endYearMonth = time
        // this.queryParam.vendorType = '内部'
        depChart(this.queryParam).then(res => {
          if (res.result) {
            // console.log('部门统计图数据', res.result)
            res.result.forEach(item => {
              this.cdepNameArr.push(item.cdepName)
              this.iquantityArr.push(item.iquantity)
              this.inatMoneyArr.push(item.inatMoney)
            })
            // console.log('部门三数组', this.cdepNameArr, this.iquantityArr, this.inatMoneyArr)
          }

          //2、后图
          this.$nextTick(() => {
            this.initEcharts()
          })
        })
      })
    },

    // 1、查询 重置方法 先获取 chart 数据
    getDepChartData() {
      this.queryParam.vendorType = '外部'
      depChart(this.queryParam).then(res => {
        if (res.result) {
          // console.log('部门统计图数据', res.result)
          res.result.forEach(item => {
            this.cdepNameArr.push(item.cdepName)
            this.iquantityArr.push(item.iquantity)
            this.inatMoneyArr.push(item.inatMoney)
          })
          // console.log('部门三数组', this.cdepNameArr, this.iquantityArr, this.inatMoneyArr)
        }

        //2、后图
        this.$nextTick(() => {
          this.initEcharts()
        })
      })
    },

    initEcharts() {
      const myChart = echarts.init(document.getElementById('departmentChart')) //dark

      const option = {
        title: {
          bpttom: '20',
          text: '部门统计表',
          textStyle: {
            fontSize: 18,
            color: '#5470c6'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          textStyle: {
            fontSize: 18
          }
        },

        legend: {
          textStyle: {
            fontSize: 16,
            color: '#5470c6'
          },
          data: ['实际数量', '本币金额']
        },
        grid: {
          show: true, //是否显示直角坐标系网格。[ default: false ]
          left: '6%', // 组件离容器左侧的距离。
          right: '6%',
          borderColor: 'none', //网格的边框颜色
          bottom: '20%'
        },

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

          axisPointer: {
            type: 'shadow'
          },
          data: this.cdepNameArr
        },
        yAxis: [
          {
            type: 'value',
            name: '实际数量'
            // min: 1000000,
            // max: 120000000
            // interval: 10000000,
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
          {
            type: 'value',
            name: '本币金额'
            // min: 0,
            // max: 10000000,
            // interval: 50000
            // axisLabel: {
            //   formatter: '{value} °C'
            // }
          }
        ],
        series: [
          {
            name: '实际数量',
            type: 'bar',
            // tooltip: {
            //   valueFormatter: function(value) {
            //     // return value + ' ml';
            //   }
            // },
            itemStyle: {
              color: 'orange'
              // normal:{
              // 颜色:  function ( params )  {
              //     	//注意，如果颜色太少，后面的颜色不会自动循环。最好再定义几个颜色
              //         变量colorList =  [ '#c23531' ,'#2f4554' , '#61a0a8' , '#d48265' ,'#91c7ae' ,'#749f83' , '#ca8622' ]
              //         返回颜色列表[参数. 数据索引]
              //     }
              // }
            },
            barWidth: '30%',
            data: this.iquantityArr
          },
          {
            name: '本币金额',
            type: 'line',
            tooltip: {
              // valueFormatter: function(value) {
              //   // return value + ' ml'
              // }
            },
            yAxisIndex: 1,
            data: this.inatMoneyArr
          }
        ]
      }
      // 渲染
      myChart.setOption(option)
      // myChart.showLoading({
      //   text: '暂无数据',
      //   showSpinner: false, // 隐藏加载中的转圈动图
      //   textColor: '#9d9d9d',
      //   maskColor: 'rgba(255, 255, 255, 0.8)',
      //   fontSize: '25px',
      //   fontWeight: 'bold',
      //   height: '100px',
      //   fontFamily: 'Microsoft YaHei'
      // })

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

  // watch: {
  //   // 3、监听数据变化
  //   newData: {
  //     deep: true,
  //     handler() {
  //       // 数据变化，执行
  //       const { cdepNameArr, iquantityArr, inatMoneyArr } = this.newData
  //       this.initEcharts(cdepNameArr, iquantityArr, inatMoneyArr)
  //       console.log('监听 外部部门 数据变化')
  //     }
  //   }
  // }
}
</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.ant-table-bordered .ant-table-footer {
  border: none;
  padding: 0;
}
</style>