LSM_OIL_SITE_zhongping/packageChart/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 './common/u-charts/u-charts.js';
import { isJSON } from './common/checker.js';

var _self;
var canvaLineA = null;
export default {
  props: {
    chartData: {
      type: Array,
      default(){}
    }
  },

  data() {
    return {
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      textarea: ''
    }
  },
  created() {
	  console.log(this.chartData)
    _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);
    console.log('chartData', this.chartData)
  },
  watch: {
    chartData: {
      handler(newVal, oldVal) {
        console.log('深度监听', newVal, oldVal)
		console.log(newVal)
        this.chartData = newVal
       this.getServerData()
      },
      deep: true
    }
  },
  methods: {
    getServerData() {
      if (this.chartData) {
        let LineA = {
          series: [{
            name: '交易时段分布', data: this.chartData
          }]
        }
        _self.textarea = JSON.stringify(LineA);
        console.log('-----------------------')
        console.log('_self.textarea', _self.textarea)
        console.log('LineA', LineA)
        console.log('-----------------------')
        _self.showLineA("canvasLineA", LineA);
      }
    },
    formatDateTime(timeStr) {
      console.log('-----------------------')
      console.log('timeStr', timeStr)
      console.log('-----------------------')
      return (timeStr > 0 ? timeStr.toFixed(0) : 0) + ':00'
    },
    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,
		 	scrollShow:true,//新增是否显示滚动条，默认false
		 	scrollAlign:'left',//滚动条初始位置
		 	scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
		 	scrollColor:'#DEE7F7',//默认为 #A6A6A6
          format: (val) => {
			  console.log('xAxis', val)
            // console.log('----', val, '-----')
            // console.log('----', this.formatDateTime(val, 'str'), '-----')
            return this.formatDateTime(val)          }
        },
        yAxis: {
          gridType: 'dash',
          gridColor: '#CCCCCC',
          dashLength: 8,
          splitNumber: 5,
          format: (val) => {  
			  console.log('yAxis', val)
		  return val + '单' }
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          area: {
            type: 'curve',
            addLine: true,
            gradient: true
          }
        }
      });

    },
    touchLineA(e) {
		console.log( 'istouchLineA ',e)
      var that = this
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          console.log(' item.data', item.data)
          return (item.data[0] + ':00 ') + item.data[1] + '单 ' + '交易金额' + item.data[2] + '元'
        }
      });
    },
    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>