hlm_pl_mall_store/pages/seller/statisticsgeneral/Index.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="false">
    <view class="div container">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="近30天销售走势" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="charts-box">
          <qiun-data-charts
            type="line"
            :chartData="chartData"
            :opts="opts"
            background="none"
          />
        </view>
    </view>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
    import TitleHeader from '../../TitleHeader'
    import SellerBase from '../SellerBase'
    
import { getStatisticsGeneral } from '../../../api/sellerStatistics'
export default {
  name: 'StatisticsGeneral',
  components:{
    TitleHeader,
    SellerBase,
  },
  data(){
    return {
      navHeight: 0,
      chartData:{
        categories:[],
        series:[],
      },
      opts:{
        xAxis: {
          labelCount: 5,
        }
      }
    }
  },
  created () {
    this.getStatisticsGeneral()
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  beforeDestroy () {
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    // 最近30天销售数据
    getStatisticsGeneral () {
      getStatisticsGeneral().then(res => {
        if (res) {
          var stattoday_json = JSON.parse(res.result.stattoday_json)// 字符串转JSON格式
          this.chartData={
            categories:stattoday_json.xAxis.categories,
            series:stattoday_json.series
          }
        }
      }).catch(error=>{
          uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}

</script>

<style scoped lang="scss">
/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
.charts-box{
  width: 100%;
  height:300px;
}
</style>