ECharts仪表盘样式设置

最新推荐文章于 2025-03-28 23:06:43 发布

lynachen

最新推荐文章于 2025-03-28 23:06:43 发布

阅读量8.7k

点赞数 4

分类专栏：前端开发

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Julylyna/article/details/100021000

版权

前端开发专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ECharts仪表盘样式设置</title>
		<!-- 引入 ECharts 文件 -->
		<script src="echarts.min.js"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 250px;height: 250px;"></div>
		
		<script>
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			
			// 指定图表的配置项和数据
			option = {
				title : {  //标题组件
					text: '920',
			        textStyle:{
				        color: '#000',  //文字颜色
				        fontStyle: 'normal',  //字体风格：'normal','italic','oblique'
				        fontWeight: 'normal', //字体粗细 ：'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
				        fontFamily: 'sans-serif',//字体系列： 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
				　　　　 	fontSize: 24, //字体大小
				    },
			        x:'center',
			        bottom:0,
			   	},
		        tooltip: {
		            formatter: "{a} <br/>{b} : {c}%",
		        },
		        series: [
		            {
		            	type: 'gauge',
		            	name: '数据指标',
		                radius: '100%',  //仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值
		                axisLine: {      //仪表盘轴线相关配置
		                	show:true,
		                    lineStyle: {
		                        color: [  //仪表盘背景颜色渐变
				                    [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
				                      	{
				                        	offset: 0.1,
				                        	color: "#fd2100"
				                      	},
				                      	{
				                        	offset: 0.6,
				                        	color: "#d09f00"
				                      	},
				                      	{
				                        	offset: 1,
				                        	color: "#26fd00"
				                      	}
				                    ])
				                  ]
				                ],
		                        width:20,  //轴线宽度
		                    },
		                },
		                splitLine: {  //分隔线样式。
			                show: false,
			                interval:0,   //默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
			                lineStyle:{   //分割线样式
			            		
			            	}
			            },
		                axisLabel: {  // 刻度标签
		                	show:true,
	                    	color: '#000',
	                    	fontSize:10,   //改变仪表盘内刻度数字的大小
	                    	shadowColor : '#000', //默认透明
		                },
		                title: {	//仪表盘标题。
			            	show: true,				//是否显示标题,默认 true。
			            	offsetCenter: [0,"60%"],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
	                        color: '#000',
	                        fontWeight: '100',
	                        fontSize: '18',
			            },
			            
			            detail: {				// 仪表盘详情，用于显示数据。
			            	show: true,				// 是否显示详情,默认 true。
			            	offsetCenter: [0,"35%"],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
	                        color: '#000',
	                        fontWeight: '700',
	                        fontSize: '20',
			            	formatter: "{value}%",	// 格式化函数或者字符串
			            },
		                data: [{ value: 92, name: '指标' }],
		                markPoint:{  //图表标注
                            symbol:'circle', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                            symbolSize:5,
                            data:[
                                //跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
                                {x:'center',y:'center',itemStyle:{color:'#FFF'}}
                            ]
                        },
		            }
		        ]
		    };
		    
		    // 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option, true);
		</script>
	</body>
</html>