web-app-v1/components/charts/area-chart.vue

<template>
	<view class="chart-line">
		<canvas canvas-id="area" id="area" 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() {
				if (this.chartData) {
					this.draw(this.chartData);
				}
			}
		},
		methods: {
			draw(data) {
				data.categories.push('');
				data.categories.unshift('');
				data.series[0].data.push(null);
				data.series[0].data.unshift(null);
				this.area = new uCharts({
					$this: this, // this
					type: 'area', // 类型
					canvasId: 'area', // id
					colors: [this.color ? this.color : '#FB231F'], // 颜色
					width: uni.upx2px(688), // 宽
					height: uni.upx2px(567), // 高
					fontSize: uni.upx2px(28), // 字体大小
					enableScroll: true, // 是否可以拖拽
					enableMarkLine: true, // 是否显示辅助线
					animation: true, //展示动画
					legend: {
						show: true
					},
					extra: {
						area: {
							type: 'curve',
							opacity: 0.3,
						}
					},
					dataLabel: true, //是否显示图表区域内数据点上方的数据文案
					dataPointShape: true, // 是否在图表中显示数据点图形标识
					dataPointShapeType: 'solid', // 数据点图形标识类型 可选值：实心solid、空心hollow
					background: this.background,
					categories: data.categories,
					series: data.series,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						// type: 'grid',
						itemCount: 5, // X轴可见区域数据数量（即X轴数据密度），配合拖拽滚动使用（即仅在启用enableScroll时有效）
						scrollShow: true, // 是否显示滚动条
						// disableGrid: true, // 不绘制 X 轴网格线
						scrollAlign: 'right', // 滚动条起始位置
						fontColor: this.color, // X 轴文字颜色
						scrollColor: this.color, // X轴滚动条颜色
						axisLineColor: '#CCCCCC', // 坐标轴轴线颜色
						scrollBackgroundColor: this.background, // X轴滚动条背景颜色
						// disabled: false,
						// format: v => {
						// 	var date = new Date(v);
						// 	return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;
						// }
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						splitNumber: 5,
						min: 0,
						format: val => {
							return val;
						},
						// gridColor: '#ccc',
						max: Math.max.apply(Math, data.series[0].data) + 123,
						// gridType: 'dash'
					}
				});
			},
			touchLine(e) {
				this.area.scrollStart(e);
			},
			moveLine(e) {
				this.area.scroll(e);
			},
			touchEndLine(e) {
				this.area.scrollEnd(e);
			}
		}
	};
</script>

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

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