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

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

<script>
import * as echarts from 'echarts'
// import { cusChart } from '@api/reportForms/order-statistics.js'

export default {
  name: 'DepartmentChart', // 部门统计图
  data() {
    return {
      // newData: {
      // departmentArr: [],
      //realQuantityArr: []
      // localMoneyArr: []
      // }
    }
  },

  mounted() {
    // this.getChartData()
    this.initEcharts()
  },
  methods: {
    // 1、先获取 chart 数据
    getChartData() {
      // 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、执行chart
      //   this.$nextTick(() => {
      //     this.initEcharts()
      //   })
      // })
    },

    initEcharts() {
      const myChart = echarts.init(document.getElementById('cusChart')) //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: [
            '实际数量',
            '本币金额'
            // {
            //   name: '染损(%)',
            //   icon: 'circle' // 图例的图标样式
            // }
          ]
        },
        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: ['FD', 'PMK', 'AUCHAN', 'BIOWORLD', 'CB', 'DUNNES', 'EVA-L']
          // data: this.departmentArr
        },
        yAxis: [
          {
            type: 'value',
            name: '实际数量',
            min: 0,
            max: 100000,
            interval: 10000,
            axisLabel: {
              // formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: '本币金额',
            min: 0,
            max: 1200000,
            interval: 200000,
            axisLabel: {
              // formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: '实际数量',
            type: 'bar',
            // tooltip: {
            //   valueFormatter: function(value) {
            //     // return value + ' ml';
            //   }
            // },
            // 折现部门渐变色
            // 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)' }
            //     ])
            //   }
            // },
            barWidth: '30%',
            data: [90000, 40000, 87666, 65555, 26347, 87687, 26546]
            // data: this.dyeLossRateArr
          },
          {
            name: '本币金额',
            type: 'line',
            tooltip: {
              // valueFormatter: function(value) {
              //   // return value + ' ml'
              // }
            },
            data: [22443, 68176, 71276, 50176, 70176, 68976, 38276]
          }
        ]
      }
      // 渲染
      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>