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) + '笔'} }], }, width: _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>

 

posted @ 2020-09-18 15:04  小蘑菇123  阅读(1147)  评论(0编辑  收藏  举报