weapp-v1/components/ucharts-line.vue

<template>
	<view class="ucharts-line">
		<canvas disable-scroll=true @touchstart="touchLine" @touchmove="moveLine" @touchend="touchEndLine" :canvas-id="id" :id="id" :style="{'width':cWidth+'px','height':cHeight+'px'}"></canvas>
	</view>
</template>

<script>
	import uCharts from '../common/js/u-charts.js'
	let canvaLine = null
	export default {
		props: {
			chartData: Object
		},
		data() {
			return {
				id: 'ucharts-line',
				cWidth:'',
				cHeight:'',
				color: ['#FA6342'],
				total: 0
			}
		},
		created () {
			this.cWidth= uni.upx2px(568);
			this.cHeight= uni.upx2px(405);
		},
		mounted () {
			canvaLine = new uCharts({
				$this: this,  //传入this
				canvasId: this.id,  //传入id
				colors: this.color,  //颜色
				type: 'line',  //类型折线图
				fontSize: uni.upx2px(24),  //字体大小
				background:'#FFFFFF',  //背景色
				pixelRatio: 1,  //像素比，默认为1，仅支付宝小程序需要大于1，其他平台必须为1
				animation: true,  //展示动画
				padding: [4, 0, 0, 0],
				enableScroll: true,//开启图表拖拽功能
				categories: this.chartData.categories,
				series: this.chartData.series,  //数据
				extra: {
					line: {
						type: 'curve',
						width: uni.upx2px(8)
					}
				},
				width: this.cWidth,  //图表宽
				height: this.cHeight,  //图表高
				legend:{  //不显示图例
					show: false
				},
				dataLabel: true,  //显示数据
				dataPointShapeType: 'hollow',
				addPoint: true, 
				xAxis: {
					disableGrid: false,
					type: 'grid',
					gridColor: '#E6E6E6',
					fontColor: '#666666',
					boundaryGap: 'justify',
					axisLineColor: '#0065FF',
					itemCount: 7,
					labelCount: 8,
					scrollShow: true, 
					scrollAlign: 'right',
					scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
					scrollColor:'#FA6342',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
				},
				yAxis: {
					splitNumber: 4,
					gridColor: '#E6E6E6',
					fontSize: uni.upx2px(12),
					min: 0,
					max: 40,
					axisLineColor: '#E6E6E6',
				}
			})
		},
		methods: {
			touchLine (e) {
				canvaLine.scrollStart(e)
			},
			moveLine (e) {
				canvaLine.scroll(e)
			},
			touchEndLine (e) {
				canvaLine.scrollEnd(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ucharts-line {
		width: 100%;
		height: auto;
	}
</style>