echarts-仪表盘设置项详解

最新推荐文章于 2024-06-12 10:39:54 发布

heyNewbie

最新推荐文章于 2024-06-12 10:39:54 发布

阅读量8k

点赞数

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

本文链接：https://blog.csdn.net/heyNewbie/article/details/102862628

版权

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

摘要由CSDN通过智能技术生成

样例：

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

上代码：

<!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