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

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

<script>
import * as echarts from 'echarts'

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

export default {
  name: 'CustomerChart', // 客户统计图
  data() {
    return {
      // newData: {
      // departmentArr: [],//部门 数组
      //realQuantityArr: [],//实际金额
      // localMoneyArr: []//本币金额
      // }
    }
  },

  mounted() {
    // this.getDepChartData()
    this.initEcharts()
  },
  methods: {
    // 1、先获取 chart 数据
    getDepChartData() {
      // depChart().then(res => {
      //   if (res.success) {
      //     if (res.result) {
      //       res.result.forEach(item => {
      //         this.departmentArr.push(item.departmentArr)
      //         this.realQuantityArr.push(item.realQuantityArr)
      //         this.localMoneyArr.push(item.localMoneyArr)
      //       })
      //       console.log('返回的数组', this.departmentArr, this.realQuantityArr, this.localMoneyArr)
      //     }
      //   }
      //   //2、后图
      //   this.$nextTick(() => {
      //     this.initEcharts()
      //   })
      // })
    },

    initEcharts() {
      const myChart = echarts.init(document.getElementById('depChart')) //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: ['业务一部', '业务二部', '业务三部', '业务四部', '业务五部', '业务六部', '业务七部']
          // data: this.departmentArr
        },
        yAxis: [
          {
            type: 'value',
            name: '实际数量',
            min: 0,
            max: 10000000,
            interval: 1000000,
            axisLabel: {
              // formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: '本币金额',
            min: 0,
            max: 10000000,
            interval: 5000000,
            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: [5635464, 4230466, 7498980, 6546765, 9222342, 1655143, 5055143]
            // data: this.dyeLossRateArr
          },
          {
            name: '本币金额',
            type: 'line',
            tooltip: {
              // valueFormatter: function(value) {
              //   // return value + ' ml'
              // }
            },
            data: [7237455, 5158676, 7864656, 6744645, 9543645, 4446511, 6564992]
          }
        ]
      }
      // 渲染
      myChart.setOption(option)

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

  watch: {
    // 3、监听数据变化
    newData: {
      deep: true,
      handler() {
        // 数据变化，执行
        const { departmentArr, realQuantityArr, localMoneyArr } = this.newData
        this.initEcharts(departmentArr, realQuantityArr, localMoneyArr)
        // 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.ant-table-bordered .ant-table-footer {
  border: none;
  padding: 0;
}
</style>