一、echarts学习的官网地址：
1.echarts官网---https://echarts.baidu.com/api.html#echarts
2.echarts网站--https://echarts.baidu.com/echarts2/doc/doc.html#Tooltip
3.w3cschool网址--https://www.w3cschool.cn/echarts_tutorial/?
二、结果演示
image.png
三、代码演示
<html>
<head>
<meta charset="UTF-8">
<title>单仪表盘案例</title>
<!-- 引入 ECharts 文件 -->
<script src="echart.js" type="text/javascript" charset="utf-8"></script>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
<div id="chart1"
style="width: 60%;height: 400px;top: 50px;left: 25%;border: 3px solid rgb(9, 241, 211);padding: 1%;background-color: rgb(240, 240, 124)">
</div>
</body>
</html>
<script type="text/javascript">
// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
var chart1 = echarts.init(document.getElementById("chart1"));
// 指定图表的配置项和数据
option = {
tooltip: { //提示信息----当鼠标进入图表时，显示的提示消息
formatter: "{a} <br/>{b} : {c}%" //规定消息的个数
},
toolbox: { //工具箱
feature: { //各工具配置项-----各个内置的工具按钮外，还可以自定义工具按钮(自定义的工具名字，只能以 my 开头，eg: myTool1，myTool2)。
restore: {}, //还原按钮。
saveAsImage: {} //下载按钮
}
},
series: [{ //系列列表。每个系列通过 type 决定自己的图表类型
name: '业务指标', //系列名称，用于tooltip的显示(对应tooltip中的{a})，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: 'gauge', //用来规定当前表格的类型----guage对应着仪表盘
detail: {
formatter: '{value}%'
},
data: [{
value: 50,
name: '完成率'
}]
}]
};
// 使用刚指定的配置项和数据显示图表
chart1.setOption(option)
</script>
