zhgdyunapp/components/u-charts/component.vue

<template>
	<canvas v-if="canvasId" :id="canvasId" :canvasId="canvasId"
		:style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
		@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error">
	</canvas>
</template>

<script>
	import uCharts from './u-charts.js';
	var canvases = {};

	export default {
		props: {
			chartType: {
				required: true,
				type: String,
				default: 'column'
			},
			opts: {
				required: true,
				type: Object,
				default () {
					return null;
				},
			},
			canvasId: {
				type: String,
				default: 'u-canvas',
			},
			cWidth: {
				default: 375,
			},
			cHeight: {
				default: 250,
			},
			pixelRatio: {
				type: Number,
				default: 1,
			},
			legends: {
				type: Boolean,
				default: true
			}

		},
		data() {
			return {
				colors: [
					"#5181F6",
					"#00DBB6",
					"#F67F51",
					"#FF515A",
					"#8B5CFF",
					"#00CA69"
				]
			}
		},
		mounted() {
			// this.$nextTick(() => {
			// 	this.init();
			// })

		},
		watch: {
			opts: {
				handler(newVal, oldVal) {
					// 	// this.init();
					// 	// console.log('canvases')
					// 	// console.log(canvases)
					// 	if (canvases = {}) {
					// 		// this.$nextTick(() => {
					// 		// 	this.init();
					// 		// })
					// 		setTimeout(()=>{
					this.init();
					this.changeData(this.canvasId, newVal)
					// 		},600)

					// 	} else {

					// 	}
				},
				deep: true,
				immediate: true,
			}
		},

		methods: {
			init() {
				console.log('图表初始化')
				switch (this.chartType) {
					case 'column':
						this.$nextTick(() => {
							console.log('图表初始化1')
							this.initColumnChart();
						})
						break;
					case 'line':
						this.$nextTick(() => {
							console.log('图表初始化2')
							this.initLineChart();
						})

						break;
					case 'arcbar': //半圆
						console.log('图表初始化3')
						setTimeout(() => {
							this.initArcbarChart();
						}, 1200)


						break;
					case 'ring': //圆环
						this.$nextTick(() => {
							console.log('图表初始化4')
							this.initRingChart();
						})

						break;
					default:
						break;
				}
			},
			initColumnChart() {
				var xData = this.opts.categories
				for (var i = 0; i < xData.length; i++) {
					if (xData[i].length > 5) {
						xData[i] = xData[i].substring(0, 5) + '...'
					}

				}
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'column',
					legend: {
						show: false
					},
					colors: this.colors,
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					categories: xData,
					series: this.opts.series,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						itemCount: 6,
						labelCount: this.opts.categories.length,
						rotateLabel: true
					},
					yAxis: {
						format: (val) => {
							if ((val + "").indexOf(".") != -1) {
								return val.toFixed(0); //保留小数后1位
							} else {
								return val;
							}
						},
						// data:{

						// }
						// axisLine:false
						//disabled:true
					},
					dataLabel: true,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: 14
						}
					},
					scales: {
						xAxis: [{
							stacked: true,
							ticks: {
								fontColor: 'red' // X轴样式
							}
						}],
					}
				});
			},
			initLineChart() {
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: this.legends
					},
					dataLabel: false,
					dataPointShape: true,
					colors: this.colors,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					categories: this.opts.categories,
					series: this.opts.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						type: 'grid',
						axisLine: false,
						gridColor: '#fff',
						gridType: 'dash',
						dashLength: 8,
						itemCount: 4,
						scrollShow: true
					},
					yAxis: {
						axisLine: false,
						// gridType: 'dash',
						gridColor: 'rgba(42, 43, 91, 0.1)',
						// dashLength: 8,
						// splitNumber: 5,
						min: 0,
						// max: 180,
						// format: (val) => {
						// 	return val.toFixed(0) + '元'
						// }
					},
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						line: {
							type: 'curve'
						}
					}
				});
			},

			//半圆
			initArcbarChart() {
				let winWidth = 0;
				uni.getSystemInfo({
					success: function(res) {
						winWidth = res.windowWidth / 2 - 10;
					}
				});
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: this.opts.series,
					animation: true,
					width: this.cWidth,
					height: this.cHeight,
					dataLabel: true,
					subtitle: {
						name: this.opts.series[0].name,
						color: '#000',
						fontSize: 25,
						offsetY: -12

					},
					extra: {
						arcbar: {
							type: 'default',
							width: 12,
							startAngle: 1,
							endAngle: 0,
							gap: 5,
							radius: 90,
							center: {
								y: 100,
								x: winWidth
							}

						}
					}
				});
			},


			//圆环
			initRingChart() {
				console.log('this.canvasId', this.canvasId)

				var dataLabel = false,
					legend = false;
				var radius = 0;
				if (this.canvasId == 'integritySafety') {
					dataLabel = legend = true
				}
				if (this.canvasId == 'qualityPieChart') {
					radius = 30
				}
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'ring',
					fontSize: 11,
					title: this.opts.title,
					legend: {
						show: legend
					},
					extra: {
						pie: {
							ringWidth: 12,
							offsetAngle: -90,
							activeRadius: radius,
						},
						tooltip: {
							showBox: false,
						}
					},
					width: this.cWidth,
					height: this.cHeight,
					background: '#FFFFFF',
					series: this.opts.series,
					dataLabel: dataLabel,
				});
			},



			// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
			changeData(cid, newdata) {
				console.log('updateData', newdata)
				console.log(canvases[cid])
				if (!canvases[cid]) return;
				var xData = newdata.categories
				for (var i = 0; i < xData.length; i++) {
					if (xData[i].length > 5) {
						xData[i] = xData[i].substring(0, 5) + '...'
					}

				}
				canvases[cid].updateData({
					series: newdata.series,
					categories: xData,
					title: newdata.title
				});
			},
			touchStart(e) {
				canvases[this.canvasId].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
				canvases[this.canvasId].scrollStart(e);
			},
			touchMove(e) {
				canvases[this.canvasId].scroll(e);
			},
			touchEnd(e) {
				canvases[this.canvasId].scrollEnd(e);
			},
			error(e) {
				console.log(e)
			}
		},
	};
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
		flex: 1;
		background-color: #FFFFFF;
	}
</style>