<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
</head>
<body>
<div id="main" style="height: 100px; width: 200px;"></div>
<script>
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
option = {
backgroundColor: "rgba(5,27,74, 1)", // 背景色
series: [
{
type: "gauge",
center: ["50%", "70%"], //调整位置
radius: 55, //外圆半径55
startAngle: 180,
endAngle: 0, // 结束位置
pointer: {
show: false, // 是否显示仪表盘指针
},
progress: {
// 展示当前进度。
show: true, // 是否展示进度条
overlap: false, // 是否重叠
roundCap: false, // 是否圆顶
clip: false, // 是否裁掉超出部分
},
axisLine: {
// 设置线条
lineStyle: {
width: 15, // 圆环宽 15
opacity: 0.1,
},
},
itemStyle: {
normal: {
//具体颜色显示
color: {
type: "radial", // 使用径向渐变色
x: 0.2, // 渐变色的起始点位置
y: 1,
r: 1, // 渐变半径，值为0到1之间
colorStops: [
{ offset: 0, color: "rgba(1, 66, 178, 0.2)" }, // 渐变颜色1
{ offset: 1, color: "rgba(0, 255, 229, 1)" }, // 渐变颜色2
],
},
//饼状图阴影，值越大阴影亮度越高
shadowBlur: 24, // 模糊
shadowColor: "rgba(0, 255, 229, 0.5)", // 圆环阴影色
},
},
splitLine: {
// 分隔线样式。
show: false, // 是否显示分隔线。
distance: 0, // 分隔线与轴线的距离。
length: 1033, // 分隔线线长。支持相对半径的百分比。
},
axisTick: {
// 刻度样式。
show: false, // 是否显示刻度。
},
axisLabel: {
//刻度标签。
show: false, // 是否显示标签。
distance: 50, // 标签与刻度线的距离。
},
data: [
{
value: 50, // 可写变量 此value 对应 formatter: '{value}%' 中的Value
detail: {
// 仪表盘边框数据详情，用于显示数据。
valueAnimation: true, // 是否开启标签的数字动画。
offsetCenter: ["0%", "-10%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
fontSize: 11 // 文字的字体大小。
},
},
],
detail: {
//仪表盘详情，用于显示数据 仪表盘中间数字数据。
color: "rgba(57, 193, 91, 1)", // 文本颜色，默认取数值所在的区间的颜色
formatter: "{value}%▴", // 格式化函数或者字符串
},
},
],
};
option && myChart.setOption(option);
</script>
</body>
</html>
