ehcarts半圆型进度条

最新推荐文章于 2024-06-27 17:27:04 发布

qq_42208679

最新推荐文章于 2024-06-27 17:27:04 发布

阅读量1.5k

点赞数 3

本文链接：https://blog.csdn.net/qq_42208679/article/details/105349069

版权

ehcarts半圆型进度条

说明：
1.引入jQuery https://code.jquery.com/jquery-3.1.1.min.js
2.引入echarts https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js
效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.echarts {
			width: 200px;
			height: 200px;
			background: #ccc;
			margin: 0 auto;
		}
		
	</style>

	<body>
		<div class="echarts" id="echarts">

		</div>
	</body>

</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('echarts'));

	var data = {
		value: 80,
		color: {
			pieMini: '#0f0', //小圆形颜色
			piePlus: '#01fea2', //大圆形颜色
			value: '#687284', //底部数值颜色
		},
	}

	option = {
		backgroundColor: '#000200',
		series: [{
			"name": "仪表盘",
			"type": "gauge",
			"splitNumber": 10,
			"axisLine": {
				"lineStyle": {
					"color": [
						[0, "#46da04"], //初始值及颜色
						[data.value / 100, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
								offset: 0.1,
								color: "#46da04"
							},
							{
								offset: 0.6,
								color: "#1bf066"
							},
							{
								offset: 1,
								color: "#02fea0"
							}
						])], //渐变值颜色

						[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
								offset: 0.1,
								color: "#0f1331"
							},
							{
								offset: 0.8,
								color: "#102831"
							},
							{
								offset: 1,
								color: "#113430"
							}
						])] //底层颜色渐变
					],
					"width": 10
				}
			},
			detail: {
				offsetCenter: [0, "5%"], //数值的显示位置
				formatter: '{value}%',
				textStyle: { //仪表盘的数值单位及颜色，字体大小的改变
					fontSize: 20,
					color: '#ffd200',
					top: '100%',
				}
			},

			axisLabel: {
				show: false,
			},
			"axisTick": {
				show: false,
			},
			"splitLine": {
				"show": false,
			},
			"itemStyle": {
				show: false,
			},
			"title": {
				"offsetCenter": [0, "75%"],
				"textStyle": {
					color: '#00ffa5',
					fontSize: 12,
					fontFamily: '"Microsoft Yahei","微软雅黑"',
				}
			},
			"data": [{
				"name": "健康资料\n完善率",
				"value": data.value,
			}],
			pointer: {
				show: false,
			},
		}, ]
	}

	myChart.setOption(option);
</script>

qq_42208679

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
ehcarts半圆型进度条

ehcarts半圆型进度条说明：1.引入jQuery https://code.jquery.com/jquery-3.1.1.min.js2.引入echarts https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js效果如下：代码如下：<!DOCTYPE html><html> <h...
复制链接

扫一扫