单价折线图 - 数据可视化

<template>
  <view class='box'>
    <view class='title'>
      单价折线图
    </view>
    <view class='charts-box'>
      <qiun-data-charts type='line' :chartData='chartData' :ontouch='true' />
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        chartData: {},
        qtQuota: 0,
        totalMony: 0,
        totalPerformance: 0
      }
    },
    onLoad(option) {
      this.qtQuota = option.qtQuota;
      this.totalMony = this.getMarketRate(option.totalMoney, option.totalPerformance);
    },
    onShow() {
      this.getList();
    },
    methods: {
      getList() {
        this.ajax.get('/account/getQtUnitLineChart').then(res => {
          if (res.status == 200) {
            var chartData = {
              categories: res.data.data,
              series: [{
                name: '单价',
                data: res.data.list
              }]
            };
            this.chartData = chartData;

            //this.chartData.categories = res.data.data;
            //this.chartData.series[0].data = res.data.list;
          }
        })
      },
      getMarketRate(totalMoney, totalPerformance) {
        // 实现 getMarketRate 函数逻辑
        // ...
        // 返回计算的值
        return marketRate;
      }
    }
  }
</script>
<style lang='scss' scoped>
  .box {
    padding: 30rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
    }

    .charts-box {
      width: 100%;
      height: 300px;
    }
  }
</style>