带圆点的仪表盘

 

 

<template>
	<div id="openLeftOneTl" style="width: 100%; height: 100%;"></div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.myecharts();
			this.WidthAdaptive();
		},
		watch: {

		},
		methods: {
			WidthAdaptive(res) {
				var windth = window.screen.width;
				let fontSize = windth / 4422;
				return fontSize * res;
			},
			myecharts() {
				let myChart = this.$echarts.init(document.getElementById('openLeftOneTl'));

				let score = 100,
					maxScore = 180,
					scoresPercentage = score / maxScore;

				let title = '城市低保情况'
				let percent = (scoresPercentage * 100).toFixed(2)

				var option = {
					title: {
						text: title,
						subtext: score,
						left: 'center',
						bottom: "15%",
						itemGap: this.WidthAdaptive(20),
						textStyle: {
							fontSize: this.WidthAdaptive(13),
							color: '#ffffff',
						},
						subtextStyle: {
							fontSize: this.WidthAdaptive(31),
							fontFamily: 'YouSheBiaoTiHei',
							color: '#ffffff',
						}
					},
					series: [{
							type: 'gauge',
							startAngle: 180,
							endAngle: 0,
							radius: '150%',
							center: ['50%', '80%'],
							splitNumber: 26,
							detail: {
								offsetCenter: [0, 0],
								formatter: ' ',
							},
							pointer: {
								show: false,
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: [
										[1, 'rgba(5, 117, 230, 0.3)']
									],
									width: this.WidthAdaptive(20),
								},
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
						},
						// 仪表盘值得渐变
						{
							type: 'pie',
							zlevel: 10,
							radius: ['128%', '144%'],
							center: ['50%', '80%'],
							silent: true,
							animationDuration: 1500,
							animationEasing: "cubicInOut",
							startAngle: 180,
							endAngle: 0,
							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
							data: [{
									name: '',
									value: scoresPercentage,
									itemStyle: {
										color: '#389BFE',
									},
								},
								{
									value: 2 - scoresPercentage,
									itemStyle: {
										opacity: 0,
										color: 'rgba(255, 255, 255, 0)',
									},
								},
							],
						},
						// 值得尾巴，那个圆圈
						{
							type: 'pie',
							radius: ['115%', '150%'],
							center: ['50%', '80%'],
							zlevel: 10,
							silent: true,
							animationDuration: 1500,
							animationEasing: "cubicInOut",
							startAngle: 180,
							endAngle: 0,
							data: [{
									name: '',
									value: scoresPercentage,
									label: {
										show: false,
									},
									labelLine: {
										show: false,
									},
									itemStyle: {
										color: 'rgba(0,0,0,0)',
									},
								},

								// 画中间的图标
								{
									name: '',
									value: 0,
									label: {
										position: 'inside',
										backgroundColor: '#389BFE',
										borderRadius: this.WidthAdaptive(10),
										padding: this.WidthAdaptive(10), // 可以控制圆的大小
										borderWidth: this.WidthAdaptive(14),
										borderColor: 'rgba(56,155,254,.3)',
									},
								},
								{
									name: '',
									value: 2 - scoresPercentage,
									label: {
										show: false,
									},
									labelLine: {
										show: false,
									},
									itemStyle: {
										color: 'rgba(255,255,255,0)',
									},
								},
							],
						},
					],
				};


				myChart.setOption(option);

				window.onresize = myChart.resize;
			}
		},
	}
</script>

<style>

</style>