LSM_OIL_SITE/components/area-time.vue

<template>
  <view class="qiun-columns">
    <!--#ifdef H5 -->
    <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
      <view class="qiun-title-dot-light">页面地址</view>
    </view>
    <view class="qiun-bg-white qiun-padding">
      <text>pages/basic/area/time</text>
    </view>
    <!--#endif-->
    <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
      <view class="qiun-title-dot-light">发生金额</view>
    </view>
    <view class="qiun-charts">
      <!--#ifdef MP-ALIPAY -->
      <canvas
        canvas-id="canvasLineA"
        id="canvasLineA"
        class="charts"
        :width="cWidth*pixelRatio"
        :height="cHeight*pixelRatio"
        :style="{'width':cWidth+'px','height':cHeight+'px'}"
        @touchstart="touchLineA"
      ></canvas>
      <!--#endif-->
      <!--#ifndef MP-ALIPAY -->
      <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
      <!--#endif-->
    </view>
    <!--#ifdef H5 -->
    <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
      <view class="qiun-title-dot-light">标准数据格式</view>
    </view>
    <view class="qiun-bg-white qiun-padding">
      <textarea class="qiun-textarea" auto-height="true" maxlength="-1" v-model="textarea" />
    </view>
    <view class="qiun-text-tips">Tips：修改后点击更新图表</view>
    <button class="qiun-button" @tap="changeData()">更新图表</button>
    <!--#endif-->
  </view>
</template>

<script>
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
import { isJSON } from '@/common/checker.js';

var _self;
var canvaLineA = null;
export default {
  data() {
    return {
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      textarea: ''
    }
  },
  created() {
    _self = this;
    //#ifdef MP-ALIPAY
    uni.getSystemInfo({
      success: function (res) {
        if (res.pixelRatio > 1) {
          //正常这里给2就行，如果pixelRatio=3性能会降低一点
          //_self.pixelRatio =res.pixelRatio;
          _self.pixelRatio = 2;
        }
      }
    });
    //#endif
    this.cWidth = uni.upx2px(650);
    this.cHeight = uni.upx2px(500);
    this.getServerData();
  },
  methods: {
    getServerData() {
      console.log('/')
      uni.request({
        url: 'https://www.ucharts.cn/data.json',
        data: {
        },
        success: function (res) {
          console.log(res.data.data)
          let LineA = {
            series: [{
              name: '交易时段分布', data: [
                [10000, 75], [50000, 35], [150000, 55], [170000, 35], [190000, 75],
                [210000, 25], [280000, 5], [450000, 95], [460000, 5], [470000, 95],
                [490000, 5]
              ]
						},
			{
              name: '交易时段分布', data: [
                [30000, 77], [50000, 25], [170000, 50], [200000, 40], [210000, 25],
                [220000, 45], [280000,55], [450000,19], [460000, 30], [470000, 88],
                [490000, 95]
              ]
            }]
          };
          _self.textarea = JSON.stringify(res.data.data.LineA);
          console.log('-----------------------')
          console.log('res.data.data.LineA', res.data.data.LineA)
          console.log('_self.textarea', _self.textarea)
          console.log('LineA', LineA)
          console.log('-----------------------')
          _self.showLineA("canvasLineA", LineA);
        },
        fail: () => {
          _self.tips = "网络错误，小程序端请检查合法域名";
        },
      });
    },
    formatDateTime(timeStamp, returnType) {
      var date = new Date();
      date.setTime(timeStamp * 1000);
      console.log('\n\n------ begin:', timeStamp, ' ------')
      console.log('')
      console.log('------ end: ', date.setTime(timeStamp * 1000), ' ------\n\n')
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? ('0' + minute) : minute;
      second = second < 10 ? ('0' + second) : second;
      if (returnType == 'str') { return h + ':' + minute; }
      // return [y, m, d, h, minute, second];
      // return [y + '-'+ m + '-'+ d +' '+ h+ ':'+ minute + ':' + second];
    },
    showLineA(canvasId, chartData) {
      canvaLineA = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'area',
        fontSize: 11,
        padding: [15, 20, 0, 15],
        legend: false,
        dataLabel: true,
        dataPointShape: true,
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        // categories: chartData.categories,
        series: chartData.series,
        animation: true,
        xAxis: {
          type: 'grid',
          gridColor: '#CCCCCC',
          gridType: 'dash',
          dashLength: 8,
          boundaryGap: 'justify',
          splitNumber: 5,
          format: (val) => {
            console.log('----', val, '-----')
            console.log('----', this.formatDateTime(val, 'str'), '-----')
            return this.formatDateTime(val, 'str')          }
        },
        yAxis: {
          gridType: 'dash',
          gridColor: '#CCCCCC',
          dashLength: 8,
          splitNumber: 5,
          format: (val) => { return val.toFixed(0) + '元' }
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          area: {
            type: 'curve',
            addLine: true,
            gradient: true
          }
        }
      });

    },
    touchLineA(e) {
			var  that = this
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          console.log(' item.data', item.data)
          return  that.formatDateTime(item.data[0], 'str') +'交易金额'+ item.data[1] + '元'
        }
      });
    },
    changeData() {
      if (isJSON(_self.textarea)) {
        let newdata = JSON.parse(_self.textarea);
        canvaLineA.updateData({
          series: newdata.series,
          categories: newdata.categories
        });
      } else {
        uni.showToast({
          title: '数据格式错误',
          image: '../../../static/images/alert-warning.png'
        })
      }
    }
  }
}
</script>

<style scoped>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
  width: 640upx;
  height: 500rpx;
  background-color: #ffffff;
}

.charts {
  width: 640upx;
  height: 500rpx;
  background-color: #ffffff;
}
</style>