1、使用uCharts繪制儀表盤

方法：在hbuilderx中安裝ucharts插件，uni_modulus會自動插入qiun-data-charts的文件夾，后面直接使用，不用在頁面中引入
注意：opts即gauge的相關配置可在ucharts官網在線工具中調好再復制出來
在線工具：https://demo.ucharts.cn/#/

如：
<template>
	<view class="content">
		<view class="warnInfo">
			<view class="warn_title">
				報警信息
			</view>
			<view class="warn_echart">

				<view class="charts_box">
					<!-- 通過opts傳值來覆蓋config-ucharts.js中的默認配置，自定義配置可以在在線工具中調好再復制 -->
					<qiun-data-charts type="gauge" :chartData="chartData" background="none" :opts="opts" />
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				title: 'Hello',
				chartData: {
					categories: [],
					series: [],
				},
				opts: {}
			}
		},
		onLoad() {

		},
		onReady() {
			//調用繪制方法
			this.getServerData()
		},

		methods: {
			getServerData() {
				setTimeout(() => {
					this.chartData = {
						categories: [{
								"value": 0.2,
								"color": "rgba(220, 142, 22, 0.5)"
							},
							{
								"value": 0.6,
								"color": "rgba(220, 142, 22, 0.8)"
							},
							{
								"value": 1,
								"color": "rgba(220, 142, 22, 1)"
							}
						],
						series: [{
							"name": "報警次數",
							"data": 5
						}]
					}

					this.opts = {
						"type": "gauge",
						"canvasId": "",
						"canvas2d": false,
						"background": "none",
						"animation": true,
						"timing": "easeOut",
						"duration": 1000,
						"color": [
							"#1890FF",
							"#91CB74",
							"#FAC858",
							"#EE6666",
							"#73C0DE",
							"#3CA272",
							"#FC8452",
							"#9A60B4",
							"#ea7ccc"
						],
						"rotate": false,
						"errorReload": true,
						"fontSize": 10,//刻度字體大小
						"fontColor": "#666666",
						"enableScroll": false,
						"touchMoveLimit": 60,
						"enableMarkLine": false,
						"dataLabel": true,
						"dataPointShape": true,
						"dataPointShapeType": "solid",
						"tapLegend": true,
						"title": {
							"name": "4",
							"fontSize": 13,
							"color": "rgba(220, 142, 22, 1)",
							"offsetX": 0,
							"offsetY": 30
						},
						"subtitle": {
							"name": "報警次數",
							"fontSize": 13,
							"color": "rgba(145, 177, 236, 1)",
							"offsetX": 0,
							"offsetY": 35,//調整縱向距離
						},
						"extra": {
							"gauge": {
								"type": "default",
								"width": 10,//環形寬度
								"labelColor": "#91B1EC",
								"labelOffset": 8,//label標注與環形的距離
								"startAngle": 0.75,
								"endAngle": 0.25,
								"startNumber": 0,
								"endNumber": 20,
								"format": "",
								"splitLine": {
									"fixRadius": 0,
									"splitNumber": 4,//分割段數
									"width": 30,
									"color": "transparent",//去掉分割線
									"childNumber": 5,
									"childWidth": 12
								},
								"pointer": {
									"width": 14,
									"color": "rgba(134, 153, 187, 1)"
								},
								"labelFormat": ""
							}
						}
					}
				}, 800)
			}


		},

		mounted() {

		}
	}
</script>

<style lang="scss">
	@mixin flexCenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		width: 100%;
		height: 100%;
		background: #fff;

		.warnInfo {
			width: 100%;
			height: 300upx;
			background: #132040;

			font-size: 30upx;
			color: #fff;

			.warn_title {
				width: 100%;
				height: 60upx;
				line-height: 60upx;
				text-align: left;
				background: #182951;
				padding: 0 40upx;
				box-sizing: border-box;
			}

			.warn_echart {
				width: 100%;
				padding: 0 40upx;
				box-sizing: border-box;
				height: calc(100% - 60upx) !important;
				color: #fff;

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