sstt-archives-web/src/views/dashboard/index.vue

<template>
  <div>

    <div class="statistics">
      <!-- <panel-group :totaldata="list" /> -->
    </div>


  </div>
</template>

<script>
  import echarts from "echarts"
  import PanelGroup from './components/PanelGroup'
  import {
    getChartsHome
  } from "../../api/dashboard.js"

  export default {
    components: {
      PanelGroup
    },
    data() {
      return {
        col: '',
        line: '',
        business_data: [],
        collect_data: [],
        list: {},
        customerArr: [],
        orderArr: [],
        chartData: {},
      }
    },
    watch: {
      chartData(val, newval) {
        if (newval){
          this.init();
        }
      }
    },
    methods: {
      async loadData() {
        await getChartsHome().then((res) => {
          console.log(res);
          this.list = res.list;
          this.chartData = res;
          let _business_data = [];
          let _collect_data = [];
          res.business_data.map(item => {
            _business_data.push(item.server_money_total)
            _collect_data.push(item.collect_money)
          })
          this.business_data = _business_data;
          this.collect_data = _collect_data;
          let _customerArr = [];
          let _orderArr = [];

          res.order_data.map(item => {
            _customerArr.push(item.active_customer)
            _orderArr.push(item.order_total)
          })
          this.customerArr = _customerArr;
          this.orderArr = _orderArr;
        }).catch()
      },
      init() {
        this.col = echarts.init(document.getElementById('col-chart'))
        this.col.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            position: 'bottom'
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          xAxis: {
            type: 'category',
            data: ['第一周', '第二周', '第三周', '第四周']
          },
          series: [{
              name: '服务金额',
              type: 'bar',
              data: this.business_data,
              itemStyle: {
                normal: {
                  color: 'rgb(42,182,252)'
                },
              },
            },
            {
              name: '收款',
              type: 'bar',
              data: this.collect_data,
              itemStyle: {
                normal: {
                  color: 'rgb(34,228,255)'
                },
              },
            }
          ]
        })

        this.line = echarts.init(document.getElementById('line-chart'))
        this.line.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['活跃客户', '服务订单']
          },
          grid: {
            left: '3%',
            right: '6%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {

          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['第一周', '第二周', '第三周', '第四周']
          },
          yAxis: {
            type: 'value',
          },
          series: [{
              name: '活跃客户',
              type: 'line',
              stack: 'Total',
              data: this.customerArr,
              itemStyle: {
                normal: {
                  color: 'rgb(42,182,252)'
                },
              },
            },
            {
              name: '服务订单',
              type: 'line',
              stack: 'Total',
              data: this.orderArr,
              itemStyle: {
                normal: {
                  color: 'rgb(34,228,255)'
                },
              },
            }
          ]
        })
      }
    },
    created() {

      //this.loadData();
    },
    mounted() {


      //this.init()

      window.onresize = () => {
        this.col.resize()
        this.line.resize()
      }

    },
    destroyed() {
      window.onresize = null
    }
  }
</script>

<style lang="scss" scoped>
  .statistics {
    display: flex;

    margin-top: 20px;

    &-title {

      padding-left: 6px;
    }

    &-content {
      text-align: center;
      font-size: 13px;

      &-top {

        &__num {
          font-weight: 600;
        }

        &__name {
          font-size: 10px;
          color: rgb(140, 140, 140);
        }
      }

      &-bottom {
        display: flex;
        justify-content: space-between;

        &-left {

          &__num {
            font-weight: 600;
          }

          &__name {
            font-size: 10px;
            color: rgb(140, 140, 140);
          }
        }

        &-right {

          &__num {
            font-weight: 600;
          }

          &__name {
            font-size: 10px;
            color: rgb(140, 140, 140);
          }
        }
      }
    }

    &>div {
      flex: 1;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .chart {
    display: flex;

    margin-top: 20px;


    .chartItem {

      width: 49%;

      .chartItemTitle {
        font-size: 16px;
        margin-bottom: 20px;
      }

      #col-chart {
        background: #fff;
        border-radius: 10px;
        flex: 1;
        margin-right: 20px;
        padding: 20px;
        box-sizing: border-box;
        min-height: 400px;
        width: 100%;
      }

      #line-chart {
        background: #fff;
        border-radius: 10px;
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
        min-height: 400px;
      }
    }


  }
</style>