weapp-v1/components/ucharts-column.vue

<template>
	<view class="ucharts-column">
		<view class="title">第 {{ season }} 赛季销售情况变化表</view>
		<view class="legend">
			<view class="legend-item" v-for="(item, index) in color" :key="index">
				<text class="bg" :style="{ background: item }"></text>
				<text class="text"> {{ chartData.series[index].name }} </text>
			</view>
		</view>
		<canvas :canvas-id="id" :id="id" :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
	</view>
</template>

<script>
	import uCharts from '../common/js/u-charts.js'
	let canvaColumn = null
	export default {
		props: {
			chartData: Object,
			season: String
		},
		data() {
			return {
				id: 'ucharts-column',
				cWidth:'',
				cHeight:'',
				color: ['#88D8C9', '#EF7D65', '#7ACDEA', '#0088ff', '#FED600'],
				moved: false,
				maxY: ''
			}
		},
		created () {
			this.cWidth= uni.upx2px(750);
			this.cHeight= uni.upx2px(360);
			this.maxY = Math.max.apply(Math, Array.prototype.concat.apply([], this.chartData.series.map(item => item.data))) || 200
		},
		methods: {
			touchColumn(e){
				canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				this.moved = true
				canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumn.scrollEnd(e);
				canvaColumn.touchLegend(e, {
					animation:true,
				});
				if (!this.moved) {
					canvaColumn.showToolTip(e, {
						format: function (item, category) {
							return category + ' ' + item.name + ':' + item.data 
						}
					});
				} else {
					this.moved = false
				}
			}
		},
		mounted () {
			canvaColumn = new uCharts({
				$this: this,  //传入this
				canvasId: this.id,  //传入id
				colors: this.color,  //柱状图颜色
				type: 'column',  //类型柱状图
				legend:{
					show: false,  //不显示图例。这里采用的是自定义
				},
				fontSize: uni.upx2px(20),  //字体大小
				background:'#FFFFFF',  //背景色
				dataLabel: false,  //不在图表中显示数据标签内容值
				pixelRatio: 1,  //像素比，默认为1，仅支付宝小程序需要大于1，其他平台必须为1
				animation: true,  //展示动画
				padding: [4, uni.upx2px(40), 0, uni.upx2px(40)],
				enableScroll: true,//开启图表拖拽功能
				categories: this.chartData.categories,  //横坐标数据
				series: this.chartData.series,  //纵坐标数据
				xAxis: {
					disableGrid:true,  //不绘制X轴网格
					itemCount: 7,
					scrollShow: true,
					scrollAlign: 'right',
					scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
					scrollColor:'#FA6342',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
				},
				yAxis: {
					disableGrid: true,  //不绘制Y轴网格
					data:[{  ////Y轴刻度相关
						min: 0,
						max: this.maxY % 5 === 0 ? this.maxY : Math.ceil(this.maxY / 5) * 5,
						calibration: true
					}]
				},
				extra: {
					column: {
						width: uni.upx2px(18)  //柱状图宽度
					}
				},
				width: this.cWidth,  //图表宽
				height: this.cHeight - 50,  //图表高
			})
		}
	}
</script>

<style lang="scss" scoped>
	.ucharts-column {
		width: 100%;
		height: 490rpx;
		position: relative;
		.title {
			position: absolute;
			width: 100%;
			height: 85rpx;
			line-height: 85rpx;
			text-align: center;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(42,42,42,1);
		}
		.legend {
			position: absolute;
			right: 64rpx;
			top: 112rpx;
			width: 76rpx;
			height: auto;
			.legend-item {
				height: 15rpx;
				font-size: 15rpx;
				line-height: 15rpx;
				margin-bottom: 3rpx;
				.bg {
					height: 100%;
					width: 19rpx;
					float: left;
				}
				.text {
					height: 100%;
					float: right;
				}
			}
		}
		canvas {
			position: absolute;
			bottom: 0;
		}
	}
</style>