<div class="myHighchart" v-if="charBtn">
  <div class="tabs">
      <el-button>付款成功金额：元</el-button>
      <el-button>付款成功：笔</el-button>
  </div>
  <vue-highcharts :Highcharts="Highcharts" :options="chartOpt1" ref="lineCharts"
      style="width: 82%;margin: 0 auto"></vue-highcharts>
</div>

export default {
    data: function () {
        return {
            chartOpt1: {               
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: '金额'
                    },
                    labels: {
                        formatter: function () {
                            return this.value + '元';
                        }
                    }
                },
                series: [{
                    name: '',                       
                    data: []
                }]
            },
            charBtn:false,
            chart:{
                money:0,
                num:0,
            },             
        }
    },
}

//获取列表
getBlockList(){
    this.charBtn =false;
    this.load_data = true;
    let postData = {
        page: this.curPage,                                     
        game_id:this.queryData.game_id,
    };

    this.$get(`${this.$url}thirdaccess/access-order/index`, postData).then((res) => {
        let result = res.data;
        let lineCharts = this.$refs.lineCharts;

        if (result.code == 0) {
            this.totalPage = result.data.odata.count;
            this.items = result.data.odata.items;

            Object.keys(result.data.game_id).forEach( key => {                       
                this.queryData.game_listArr.push({id:String(key),val:result.data.game_id[key]})
            });

            this.chart.money = result.data.orderStatistics.total_amount;
            this.chart.num = result.data.orderStatistics.total_people;
  
            //多级json 视图更新1
            this.chartOpt1.xAxis.categories = result.data.orderStatistics.unit;
            this.chartOpt1.series = result.data.orderStatistics.list;
            this.$nextTick(function () {
                this.charBtn = true;
            })

            this.load_data = false;
        }
    });
}, 

const asyncData = {
  xAxis: {
      categories: []
  },
  yAxis: {
      title: {
          text: '金额'
      },
      labels: {
          formatter: function () {
              return this.value + '元';
          }
      }
  },
  series: [{
      name: '',                       
      data: []
  }]
}

export default {
  data: function () {
    return {
      chartOpt1:{},
      charBtn:false,
      chart:{
          money:0,
          num:0,
      },
    }
  }
}
//获取列表
getBlockList(){
    this.charBtn =false;
    this.load_data = true;
    let postData = {
        page: this.curPage,                                     
        game_id:this.queryData.game_id,
    };

    this.$get(`${this.$url}thirdaccess/access-order/index`, postData).then((res) => {
        let result = res.data;
        let lineCharts = this.$refs.lineCharts;

        if (result.code == 0) {
            this.totalPage = result.data.odata.count;
            this.items = result.data.odata.items;

            Object.keys(result.data.game_id).forEach( key => {                       
                this.queryData.game_listArr.push({id:String(key),val:result.data.game_id[key]})
            });

            this.chart.money = result.data.orderStatistics.total_amount;
            this.chart.num = result.data.orderStatistics.total_people;

            //多级json 视图更新2
            asyncData.xAxis.categories = result.data.orderStatistics.unit;
            asyncData.series = result.data.orderStatistics.list;
            this.chartOpt1 = Object.assign({}, this.chartOpt1, asyncData)

            this.load_data = false;
        }
    });
},