目录
一、自定义仪表盘
1.仪表盘相关
2.常用属性
（1）series
（2）graphic
二、自定义仪表盘
1.基本仪表盘绘制
2.分析结构，分别绘制
（1）自定义形状
（2）仪表盘各部分
三、示例代码
如图样子的：
一、自定义仪表盘
echarts官网相关内容：Documentation - Apache ECharts
UI设计稿一般样式丰富，前端所做自定义仪表盘通常涉及对仪表盘的各种配置项进行调整和设置，以满足需求。在Echarts中，自定义仪表盘主要通过对graphic自定义形状或option对象中的series数组中相关属性来设置实现。
1.仪表盘相关
这里主要用到以下两个
（1）series
里面可用于配置仪表盘的数据系列，包括数据值、指针样式、背景颜色等。其中type属性应设置为'gauge'，以指明这是一个仪表盘图表。
（2）graphic
echarts中的graphic是原生图形元素组件，主要用于向图表中添加自定义图形或文本元素。自定义元素可以包括图像、文本、圆形、矩形等各种形状或实现其他视觉效果。通过graphic，用户可以在图表中的任意位置添加所需的内容，很实用。
2.常用属性
（1）series
type: "gauge",：仪表盘。
radius：用于配置仪表盘的半径大小，可以设置为百分比或具体的像素值。
startAngle/endAngle：用于配置仪表盘的起始角度和结束角度，可以控制指针的旋转范围。
center：用于设置仪表盘的中心点位置，可以是一个包含两个元素的数组，分别表示中心点的横坐标和纵坐标（相对于容器的百分比）。
axisLine：用于配置仪表盘的刻度线样式，包括刻度线的颜色、宽度、长度等。
splitLine：用于配置仪表盘的分隔线样式，可以通过lineStyle属性来设置分隔线的颜色和宽度。show属性用于控制分隔线是否显示，length属性用于设置分隔线的长度（正负代表方向）。
splitNumber：用于设置分隔线的数量，即仪表盘被分隔成的区间数。
pointer：用于配置仪表盘的指针样式，包括指针的长度、宽度、颜色等。如果不需要指针，可以将show属性设置为false。
progress：进度条样式。
注意：progress只有echarts5版本以上才可以使用
axisTick：用于配置仪表盘的刻度样式，包括刻度的长度、颜色等。show属性用于控制刻度是否显示。
axisLabel：用于配置仪表盘的刻度标签样式，包括标签的显示位置、颜色等。show属性用于控制标签是否显示，distance属性用于设置标签与轴线的距离（正负同length），color属性用于设置标签的颜色。
detail：用于配置仪表盘的数据标签样式，包括数据标签的位置、字体、颜色等。formatter属性用于设置数据标签的显示格式，可以是一个函数或字符串模板。offsetCenter属性用于设置数据标签相对于仪表盘中心的偏移量。rich属性用于设置丰富的文本样式。
title：用于配置仪表盘的标题样式，包括标题的位置、字体、颜色等。
itemStyle：用于配置仪表盘的整体样式，包括背景颜色、阴影效果等。
textStyle：用于配置仪表盘中文字的样式，包括字体大小、颜色、粗细等。
其他属性：这里暂时没有用到
backgroundColor：用于配置仪表盘的背景颜色。
animation：用于配置仪表盘的动画效果，包括动画的持续时间、缓动效果等。
markPoint：用于配置仪表盘的标注点，可以在图表中标注特定数值点。
markLine：用于配置仪表盘的标注线，可以在图表中标注特定数值范围。
markArea：用于配置仪表盘的标注区域，可以在图表中标注特定数值区域。
toolbox：用于配置仪表盘的工具箱，包括导出图片、数据视图等功能。
grid：用于配置仪表盘的图表区域的位置和大小。
legend：用于配置仪表盘的图例样式，包括图例的位置、字体、颜色等。但请注意，仪表盘通常不使用图例，因此这个属性在大多数情况下可能不适用。
dataZoom：用于配置仪表盘的数据缩放功能，可以控制数据的展示范围。这在处理大量数据或需要查看数据细节时非常有用。
（2）graphic
type：指定图形元素的类型。常见的类型包括'rect'（矩形）、'circle'（圆形）、'ellipse'（椭圆）、'polygon'（多边形）、'polyline'（折线）、'text'（文本）和'image'（图像）等。
shape：
对于圆形（circle），形状属性包括圆心坐标（cx, cy）和半径（r）。
对于矩形（rect），形状属性包括左上角坐标（x, y）、宽度（width）和高度（height）。
对于多边形（polygon）和折线（polyline），形状属性是一个点数组，每个点包含x和y坐标。
style：定义图形元素的样式属性，如填充颜色（fill）、边框颜色（stroke）、边框宽度（lineWidth）、透明度（opacity）等。
position：是一个包含left、right、top、bottom或center等值的对象或数组，用于指定元素相对于容器的位置。
size：是一个包含width和height的对象，用于指定元素的尺寸。
rotate：定义图形元素的旋转角度，以弧度为单位。正值表示顺时针旋转，负值表示逆时针旋转。
z 或 zlevel：控制图形元素在堆叠顺序中的层级。z通常用于控制同一层级内元素的堆叠顺序，而zlevel用于控制不同层级之间的堆叠顺序。
silent：指定图形元素是否响应鼠标事件。如果设置为true，则元素不会触发任何鼠标事件。
draggable：指定图形元素是否可拖动。如果设置为true，则用户可以通过鼠标拖动元素。
二、自定义仪表盘
1.基本仪表盘绘制
在官网找一个基本的，跟自己想要样式差不多的仪表盘，复制代码。复制下来基本不是自己想要的样式。
2.分析结构，分别绘制
根据ui图样式，这个仪表盘外层有两个圆，中间有个小圆加指针，仪表盘指针在进度条外围，进度条渐变颜色......
因为graphic与series是两部分，没有在同一位置，所以需要定下位，在绘制自定义形状。
（1）自定义形状
getBoundingClientRect()方法：使用panel.getBoundingClientRect()方法获取容器的大小和位置信息，并从中提取出宽度（width）和高度（height）。
计算圆心坐标：let cx = 容器width / 2; 和 let cy = 容器height / 2;计算容器的中心坐标，即圆心的位置。
（2）仪表盘各部分
// 进度条样式
三、示例代码
以下是一个简单Echarts仪表盘示例代码，展示了如何配置一个自己想要的仪表盘：
完整代码如下：
getPanel() {
let panel = document.getElementById("instrument_panel");
this.panel = window.echarts.init(panel);
// 获取容器的尺寸
let rect = panel.getBoundingClientRect();
let width = rect.width;
let height = rect.height;
let cx = width / 2;
let cy = height / 2;
let option = {
graphic: [
// 外层圆
{
type: 'circle',
shape: {
cx: cx,
cy: cy,
r: 50
},
style: {
fill: '#08134B',
}
},
// 里层圆
{
type: 'circle',
shape: {
cx: cx,
cy: cy,
r: 44
},
style: {
fill: '#0A2B72',
},
},
// 圆心
{
type: 'circle',
shape: {
cx: cx,
cy: cy,
r: 14
},
style: {
fill: '#093E8C',
},
},
],
series: [
// 仪表盘
{
type: "gauge",
startAngle: 235, // 起始角度
endAngle: -55, // 结束角度
radius: "44%", // 设置仪表盘的半径
center: ["50%", "52%"],
// 仪表盘轴线相关配置
axisLine: {
lineStyle: {
width: 12,
},
roundCap: true,
},
// 仪表盘刻度样式
axisTick: {
show: true,
distance: -20,
length: 2,
splitNumber: "10", //分隔线之间分割的刻度数
lineStyle: {
width: 1,
color: "#05D2FF"
}
},
// 仪表盘的分割线样式
splitLine: {
show: true,
distance: -22,
length: 4,
lineStyle: {
width: 1,
color: "#05D2FF",
}
},
// 仪表盘的指针样式
pointer: {
showAbove: true,
width: 4,
itemStyle: {
color: '#4896FF'
}
},
axisLabel: {
show: false,
},
splitNumber: 5, // 仪表盘刻度的分割段数
progress: {
show: true,
width: 12,
roundCap: true,
itemStyle: {
// 渐变颜色
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{ offset: 0, color: "#3966E3" },
{ offset: 0.2, color: "#0ACDFB"},
{ offset: 0.8, color: "#0ACDFB"},
{ offset: 1, color: "#3966E3"}
])
}
},
detail: {
valueAnimation: true,
fontSize: 10,
fontWeight: 'bold',
color: '#CC20B0',
offsetCenter: [0, "90%"],
formatter: '{value}%',
},
data: [
{
value: 70
}
]
},
]
};
option && this.panel.setOption(option);
},若文章对你有帮助，点个赞吧！
