store-new/pagesA/components/charts/cap-line.vue

<template>
	<view class="chart-line">
		<canvas canvas-id="line" id="line" class="chart" disable-scroll="true" @touchstart="touchLine"
			@touchmove="moveLine" @touchend="touchEndLine"></canvas>
	</view>
</template>

<script>
	import uCharts from './js/u-charts.js';
	export default {
		props: {
			unit: String,
			color: String,
			chartData: Object,
			background: String
		},
		watch: {
			chartData() {
				this.draw(this.chartData);
			}
		},
		methods: {
			draw(data) {
				// console.log(data.series, 1111);
				this.line = new uCharts({
					$this: this, // this
					type: 'line', // 类型
					canvasId: 'line', // id
					colors: [this.color ? this.color : '#F76454'], // 颜色
					width: uni.upx2px(688), // 宽
					height: uni.upx2px(567), // 高
					fontSize: uni.upx2px(28), // 字体大小
					enableScroll: true, // 是否可以拖拽
					enableMarkLine: true, // 是否显示辅助线
					animation: true, //展示动画
					legend: {
						show: true
					},
					extra: {
						line: {
							type: 'curve',
							width: uni.upx2px(5)
						}
					},
					dataLabel: false,
					dataPointShape: true, // 是否在图表中显示数据点图形标识
					dataPointShapeType: 'solid', // 数据点图形标识类型 可选值：实心solid、空心hollow
					background: this.background,
					categories: data.categories,
					series: data.series,
					xAxis: {
						type: 'grid',
						itemCount: 5, // X轴可见区域数据数量（即X轴数据密度），配合拖拽滚动使用（即仅在启用enableScroll时有效）
						scrollShow: true, // 是否显示滚动条
						disableGrid: true, // 不绘制 X 轴网格线
						scrollAlign: 'right', // 滚动条起始位置
						fontColor: this.color, // X 轴文字颜色
						// boundaryGap: 'justify', // 折线图、区域图起画点结束点方法：center为单元格中间起画，justify为0点起画即两端对齐
						scrollColor: this.color, // X轴滚动条颜色
						axisLineColor: '#CCCCCC', // 坐标轴轴线颜色
						scrollBackgroundColor: this.background, // X轴滚动条背景颜色
						disabled: false,
						// rotateLabel:true,
						format: v => {
							var date = new Date(v);
							return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;
						}
					},
					yAxis: {
						min: 0,
						disabled: false,
						format: val => {
							return val;
						},
						gridColor: '#ccc',
						max: Math.max.apply(Math, data.series[0].data) + 123,
						gridType: 'dash'
					}
				});
			},
			touchLine(e) {
				this.line.scrollStart(e);
			},
			moveLine(e) {
				this.line.scroll(e);
			},
			touchEndLine(e) {
				this.line.scrollEnd(e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.chart-line {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 99;

		.chart {
			width: 100%;
			height: 100%;
		}
	}
</style>