echarts-仪表盘设置项详解

最新推荐文章于 2025-06-10 13:59:01 发布

heyNewbie

最新推荐文章于 2025-06-10 13:59:01 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： echarts 仪表盘前端

本文链接：https://blog.youkuaiyun.com/heyNewbie/article/details/102862628

本文详细解析Echarts实现仪表盘的各项设置，通过实例展示如何创建具有特定需求的仪表盘，帮助开发者理解并运用到实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样例：

在项目中大概需要这样一个仪表盘，就去看了官网，也在博客上看了大神们的代码

上代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>单仪表盘案例</title>
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"></script>

<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
	<div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div>
</body>

</html>
<script type="text/javascript">
	// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
	var chart1 = echarts.init(document.getElementById("chart1"));

	var colorTemplate1 = [
		[0.2, "rgba(255,0,0,0.8)"],
		[0.8, "rgba(0,255,255,0.8)"],
		[1, "rgba(0,255,0,0.8)"]
	];


	var data1 = [{
		name: "安全度",
		value: 85,
	}];