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"
				]
			}
		},
		watch: {
			opts: {
				handler(newVal, oldVal) {
					this.init();
					// console.log('canvases')
					// console.log(canvases)
					// if(canvases=={}){
					// 	this.init();
					// }else{
					// 	this.changeData(this.canvasId,newVal)
					// }
				},
				deep: true,
				immediate: true,
			}
		},
		mounted() {
			// this.init();
		},
		methods: {
			init() {
				console.log('图表初始化')
				switch (this.chartType) {
					case 'column':
						this.initColumnChart();
						break;
					case 'line':
						this.initLineChart();
						break;
					case 'arcbar': //半圆
						this.initArcbarChart();
						break;
					case 'ring': //圆环
						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])
				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>