echarts 仪表盘得分情况

余人于RenYu

已于 2022-03-29 07:41:48 修改

阅读量1.3k

点赞数

分类专栏： echarts 文章标签： echarts

于 2020-09-18 09:42:26 首次发布

本文链接：https://blog.csdn.net/Y_Cfeng/article/details/108658951

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>

		<style>
			.chart_box {
				width: 1000px;
				height: 500px;
				position: relative;
			}
			#getScore {
				width: 1000px;
				height: 500px;
				margin: 0 auto;
			}
			.text {
				font-weight: 900;
				position: absolute;
				top: 62%;
				left: 25%;
				font-size: 3rem;
				width: 500px;
				text-align: center;
			}
			.text p {
				margin: 0;
				font-size: 6rem;
			}
		</style>
	</head>

	<body style="background: #fff">
		<div class="chart_box">
			<div id="getScore"></div>
			<div class="text">
				信用得分
				<p id="totalScore"></p>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
		<script>
			//  获取地址栏参数
			function getQueryString(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
				var r = window.location.search.substr(1).match(reg)
				if (r != null) return unescape(r[2])
				return null
			}

			var myChart = echarts.init(document.getElementById('getScore'))

			var minValue = 400
			var maxValue = 1000
			var totalScore = getQueryString('score')
			document.getElementById('totalScore').textContent = totalScore
			option = {
				backgroundColor: '#fff',
				animationDuration: 0, // 不设置动画，有默认值
				series: [
					{
						name: '刻度',
						type: 'gauge',
						min: minValue,
						max: maxValue,
						radius: '145%',
						center: ['50%', '90%'],
						splitNumber: 6, //刻度数量
						startAngle: 180,
						endAngle: 0,
						axisLine: {
							show: false,
							lineStyle: {
								width: 4,
								color: [[1, 'rgba(0,0,0,0)']],
							},
						}, //仪表盘轴线
						axisLabel: {
							show: true,
							color: '#0799f3',
							distance: 1,
							fontSize: 44,
							formatter: function (value) {
								var renturnMes = ''
								switch ((value - 300) / 100) {
									case 1:
										renturnMes = '较差'
										break
									case 4:
										renturnMes = '中等'
										break
									case 5:
										renturnMes = '良好'
										break
									case 6:
										renturnMes = '优秀'
										break
								}
								return renturnMes
							},
						}, //刻度标签。
						axisTick: {
							show: false,
							lineStyle: {
								color: '#0799f3',
								width: 5,
							},
							length: 2,
						}, //刻度样式
						splitLine: {
							show: true,
							length: 16,
							lineStyle: {
								color: '#0799f3',
								width: 1,
							},
						}, //分隔线样式
						detail: {
							show: false,
						},
						pointer: {
							show: false,
						},
					},
					{
						name: '',
						type: 'gauge',
						min: minValue,
						max: maxValue,
						radius: '170%',
						center: ['50%', '92%'],
						splitNumber: 1, //刻度数量
						startAngle: 180,
						endAngle: 0,
						axisLine: {
							show: false,
							lineStyle: {
								width: 1,
							},
						},
						//分隔线样式。
						splitLine: {
							show: false,
						},
						axisLabel: {
							show: true,
							color: '#9b9b9b',
							fontSize: 14,
							formatter: '{value}',
							distance: -35,
							padding: [20, 0, 0, 0],
						},
						axisTick: {
							show: false,
						},
						pointer: {
							show: true,
							width: 4,
							length: '100%',
						},
						itemStyle: {
							color: 'red',
						},
						detail: {
							show: false,
						},
						title: {
							show: false,
						},
						data: [
							{
								value: totalScore,
							},
						],
					},
					{
						//  未渲染的部分
						type: 'pie',
						radius: ['150%', '180%'],
						center: ['50%', '92%'],
						hoverAnimation: false,
						startAngle: 180,
						animation: false,
						label: {
							show: false,
						},
						labelLine: {
							show: false,
						},
						data: [
							// 灰色阴影部分 在区间 内的 显示颜色,否则隐藏
							{
								value: maxValue - minValue,
								itemStyle: {
									color: '#e8e8e8',
								},
							},
							{
								value: maxValue - minValue,
								itemStyle: {
									opacity: 0,
								},
							},
						],
					},
					{
						// 中心内容渲染
						type: 'pie',
						radius: ['0', '75%'],
						center: ['50%', '80%'],
						hoverAnimation: false,
						animation: false,
						startAngle: 180,
						label: {
							show: true,
							position: 'center',
						},
						labelLine: {
							show: false,
						},
						data: [
							{
								value: totalScore,
								itemStyle: {
									color: '#fff',
								},
							},
						],
					},
					{
						// 环形颜色渲染
						type: 'pie',
						radius: ['150%', '180%'],
						center: ['50%', '92%'],
						hoverAnimation: false,
						startAngle: 180,
						label: {
							show: false,
						},
						labelLine: {
							show: false,
						},
						data: [
							{
								name: '信用评分',
								value: totalScore - minValue,
								itemStyle: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										1,
										0,
										[
											{
												offset: 0,
												color: '#0799f3',
											},
											{
												offset: 1,
												color: '#74edd7',
											},
										]
									),
								},
							},
							{
								value: maxValue * 2 - totalScore - minValue,
								itemStyle: {
									opacity: 0,
								},
							},
						],
					},
				],
			}
			myChart.setOption(option)
		</script>
	</body>
</html>