zoukankan      html  css  js  c++  java
  • uni-app uCharts 双 y 轴展示

    1、获取后端返回过来的值:

    getweekData() {
    				this.statistics_week = [];
    				uni.request({
    					url: this.$url + '/homeInfo/weekData',
    					header: { 
    						'content-type': 'application/json',
    						'token':this.token,
    						'adminId':this.adminId
    					},
    					method: 'POST',
    					sslVerify: true,//验证ssl证书
    					data: {
    						token: this.token,
    						adminId: this.adminId
    					},
    					success: res => {
    						// console.log(res);
    						if(res.statusCode == 200) {
    							this.statistics_week = res.data.data; //绑定data数据
    							this.getServerData();//获取数据设置图表内容
    						}
    					},
    					fail: err => {
    						// console.log(err)
    						this.$api.msg('请求错误!');
    					},
    				});
    			},
    

    2、

    getServerData() {
      let jy_data = [],jy_count = [],jy_amount = [],max = '',max2 = '';
      if(this.statistics_week != '') {
        for(var i in this.statistics_week) {
          jy_data.push(this.statistics_week[i].date.slice(4,6) + '/' + this.statistics_week[i].date.slice(6,9));
          jy_count.push(this.statistics_week[i].count);
          jy_amount.push(this.statistics_week[i].amount);
        }
        max = Number(Math.max(...jy_amount)) + Number(100);
        max2 = Number(Math.max(...jy_count)) + Number(10);
      }
      let LineA = {
      categories: jy_data,
      series: [
      {
        name: '交易笔数',
    							data: jy_count,
    							color: '#000000',
    							pointShape: 'diamond',
    							index: 1
    						},
    						{
    							name: '交易金额',
    							data: jy_amount,
    							pointShape: 'circle',
    							index: 0
    						}
    					]
    				}
    				this.showMix("canvasMix", LineA, max, max2);
    			},
    

    3、绑定图表;

    showMix(canvasId, chartData,max,max2) {
    				canvasObj[canvasId] = new uCharts({
    					$this:_self,
    					canvasId: canvasId,
    					type: 'line',
    					fontSize:11,
    					legend: {
    						show: true
    					},
    					dataLabel:true, //显示数据点标签
    					dataPointShape:true,
    					background:'#FFFFFF',
    					pixelRatio:_self.pixelRatio,
    					categories: chartData.categories,
    					series: chartData.series,
    					animation: true,
    					xAxis: {
    						labelCount: 7,
    						itemCount: 8,
    						disableGrid:true,
    						type:'grid',
    						gridColor:'#CCCCCC',
    						gridType:'dash',
    						dashLength:8,
    					},
                            //双y轴 yAxis: { data: [{ gridType:'dash', calibration: true, position: 'left', title: '完成总数', min: 0, max: max, titleFontSize: 12, format:(val)=>{return val.toFixed(0) + '元'} }, { gridType:'dash', calibration: true, position: 'right', min: 0, max: max2, title: '及时率', titleFontSize: 12, format:(val)=>{return val.toFixed(0) + '笔'} }], }, _self.cWidth*_self.pixelRatio, height: _self.cHeight*_self.pixelRatio, extra: { line:{ type: 'straight' } } }); }, touchMix(e) { // console.log(e) canvasObj['canvasMix'].scrollStart(e); }, moveMix(e) { canvasObj['canvasMix'].scroll(e); }, touchEndMix(e) { canvasObj['canvasMix'].scrollEnd(e); canvasObj['canvasMix'].touchLegend(e); canvasObj['canvasMix'].showToolTip(e, { format: function(item, category) { return category + ' ' + item.name + ':' + item.data } }); },

    4、图表展示:

    <view class="qiun-charts">
      <canvas canvas-id="canvasMix" id="canvasMix" class="charts" @touchstart="touchMix" @touchmove="moveMix" @touchend="touchEndMix"></canvas>
    </view>
    

  • 相关阅读:
    scan chain的原理和实现——3.Tester Timing
    pattern——serial/paralel
    Scan and ATPG (Tessent)----1.基础概念
    ipdb介绍及Tensor
    pytorch简介
    Python 之map、filter、reduce
    分类器、logistic回归
    机器学习方法、距离度量、K_Means
    动态规划、图
    T分布
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/13691323.html
Copyright © 2011-2022 走看看