web-app-v1/components/charts/cap-column.vue

<template>
	<view class="chart-line">
		<canvas canvas-id="column" id="column" class="chart" disable-scroll="true"></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, 'data')
				this.column = new uCharts({
					$this: this, // this
					type: 'column', // 类型
					canvasId: 'column', // id
					width: uni.upx2px(688), // 宽
					height: uni.upx2px(567), // 高
					fontSize: uni.upx2px(28), // 字体大小
					// enableScroll: true, // 是否可以拖拽
					// enableMarkLine: true, // 是否显示辅助线
					// animation: true, //展示动画
					// legend: {
					// 	show: true
					// },
					extra: {
						column: {
							width: 20,
							barBorderCircle: true
						}
					},
					// dataLabel: false,
					// dataPointShape: true, // 是否在图表中显示数据点图形标识
					// dataPointShapeType: 'solid', // 数据点图形标识类型 可选值：实心solid、空心hollow
					// background: this.background,
					categories: data.categories,
					series: data.series,
					xAxis: {
						disableGrid: true,
						// 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,
						// rotateLabel:true,
					},
					yAxis: {
						// min: 0,
						// disabled: false,
						// format: val => {
						// 	return val;
						// },
						// gridColor: '#ccc',
						// gridType: 'dash',
						max: Math.max.apply(Math, data.series[0].data) + 123,
					}
				});
			},
		}
	};
</script>

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

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