szbd-visitor-web/src/views/dashboard/index.vue

<template>
  <div style="padding:20px">
    <PanelGroup></PanelGroup>
    <div class="tCharts">
        <PieChart :chartData="pieData" :width="'30%'"></PieChart>
        <LineChart :chartData="LineData" :width="'65%'"></LineChart>
    </div>

  </div>
</template>

<script>
  // import echarts from "echarts"
  import PanelGroup from './components/PanelGroup'
  import PieChart from '@/components/morecharts/PieChart.vue'
  import LineChart from '@/components/morecharts/LineChart.vue'
  import {
    getChartsHome
  } from "../../api/dashboard.js"

  export default {
    components: {
      PanelGroup,
      PieChart,
      LineChart
    },
    data() {
      return {
        col: '',
        line: '',
        business_data: [],
        collect_data: [],
        list: {},
        customerArr: [],
        orderArr: [],
        chartData: {},

        pieData:{
          // xArr:['普通访客','施工访客','物流车辆'],
          yArr:[
            {
              value:20,
              name:"普通访客"
            },{
              value:40,
              name:"施工访客"
            },{
              value:40,
              name:"物流车辆"
            }],
          radiusArr:'50%'
        },
        LineData:{
          xArr: ['9:00-10:00','10:00-11:00','11:00-12:00','12:00-13:00'],
          legendArr: ["普通访客", "施工访客", "物流车辆"],
          series:[
            {
                name: '普通访客',
                type: 'line',
                stack: 'Total',
                data: [20,10,40,70]
              },
              {
                name: '施工访客',
                type: 'line',
                stack: 'Total',
                data: [15,75,35,45]
              },
              {
                name: '物流车辆',
                type: 'line',
                stack: 'Total',
                data: [75,35,60,10]
              }
          ]
        }
      }
    },
    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;
      }
    }
  }
  .tCharts{
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    margin:.5%;
    margin-top: 2.5%;
  }
  .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>