原创2026/3/5大约 5 分钟
基础仪表盘
仪表盘（Gauge）也被称为拨号图表或速度表图，用于显示类似于速度计上的读数的数据，是一种拟物化的展示形式。 仪表盘是常用的商业智能（BI）类的图表之一，可以轻松展示用户的数据，并能清晰地看出某个指标值所在的范围
import * as echarts from 'echarts'
export default {
install: (app: any) => {
app.config.globalProperties.$leida = (id: any) => {
var chartDom = document.getElementById(id)!
if (chartDom == null) {
return
}
echarts.dispose(chartDom)
var myChart = echarts.init(chartDom, '', { width: 800, height: 500 })
var data = [
{
name: '完成率(%)',
value: 50,
},
]
var option = {
//指定图表的配置项和数据
title: {
text: '项目实际完成率(%)',
x: 'center',
y: 25,
textStyle: {
color: 'blue',
fontSize: 20,
},
},
series: [
{
name: '单仪表盘示例', //设置系列名称，用于tooltip的显示，legend的图例筛选
type: 'gauge', //设置系列类型
radius: '80%', //设置参数：number，string，仪表盘半径，默认75%
startAngle: 225, //设置仪表盘起始角度，默认225
endAngle: -45, //设置仪表盘结束角度，默认-45
clockwise: true, //设置仪表盘刻度是否是顺时针增长，默认true
min: 0, //设置最小的数据值，默认0，映射到minAngle
max: 100, //设置最大的数据值，默认100，映射到maxAngle
splitNumber: 10, //设置仪表盘刻度的分割段数，默认10
axisLine: {
//设置仪表盘轴线(轮廓线)相关配置
show: true, //设置是否显示仪表盘轴线(轮廓线)，默认true
lineStyle: {
//设置仪表盘轴线样式
color: [
[0.2, 'rgba(255,0,0,1)'],
[0.8, 'rgba(0,255,255,1)'],
[1, 'rgba(0,255,0,1)'],
], //设置仪表盘的轴线可以被分成不同颜色的多段
opacity: 1, //设置图形透明度，支持从0到1的数字，为0时不绘制该图形
width: 30, //设置轴线宽度，默认30
},
},
splitLine: {
//设置分隔线样式
show: true, //设置是否显示分隔线，默认true
length: 20, //设置分隔线线长，支持相对半径的百分比，默认30
lineStyle: {
//设置分隔线样式
color: '#f00', //设置线的颜色，默认#eee
//设置图形透明度，支持从0到1的数字，为0时不绘制该图形
opacity: 1,
width: 1, //设置线度，默认2
type: 'solid', //设置线的类型，默认solid，此外还有dashed，dotted
},
},
axisLabel: {
//设置刻度标签
show: true, //设置是否显示标签，默认true
distance: 25, //设置标签与刻度线的距离，默认5
color: 'blue', //设置文字的颜色
fontSize: 32, //设置文字的字体大小，默认5
},
pointer: {
//设置仪表盘指针
show: true, //设置是否显示指针，默认true
//设置指针长度,可以是绝对值，也可是相对于半径的百分比，默认80%
length: '70%',
width: 10, //设置指针宽度，默认8
},
detail: {
//设置仪表盘详情，用于显示数据
show: true, //设置是否显示详情，默认true
offsetCenter: [0, '50%'], //设置相对于仪表盘中心的偏移位置
color: 'inherit', //设置文字的颜色，默认auto
fontSize: 30, //设置文字的字体大小，默认15
formatter: '{value}%', //格式化函数或者字符串
},
data: data,
},
],
}
myChart.setOption(option)
}
},
}汽车仪表盘
前面介绍的单仪表盘，相对比较简单，只能表示一类事物的范围情况。 如果需要同时表现几类不同事物的范围情况，那么应该使用多仪表盘进行展示。利用汽车的速度、发动机的转速、油表和水表的数据展示汽车的现状
import * as echarts from 'echarts'
export default {
install: (app: any) => {
app.config.globalProperties.$leida = (id: any) => {
var chartDom = document.getElementById(id)!
if (chartDom == null) {
return
}
echarts.dispose(chartDom)
var myChart = echarts.init(chartDom, '', { width: 800, height: 500 })
var data = [
{
name: '完成率(%)',
value: 50,
},
]
var option = {
title: {
//配置标题组件
text: '汽车仪表盘',
x: 'center',
y: 100,
show: true, //设置是否显示标题，默认true
textStyle: {
color: 'blue', //设置字体颜色，默认#333
fontSize: 20, //设置字体大小，默认15
},
},
series: [
//配置数据系列，共有4个仪表盘
{
//设置数据系列之1：速度
name: '速度',
type: 'gauge',
min: 0, //设置速度仪表盘的最小值
max: 220, //设置速度仪表盘的最大值
splitNumber: 11, //设置速度仪表盘的分隔数目为22
radius: '50%', //设置速度仪表盘的大小
data: [{ value: 40, name: '车速(km/h)' }],
},
{
//设置数据系列之2：转速
name: '转速',
type: 'gauge',
center: ['20%', '55%'], //设置转速仪表盘中心点的位置，默认全局居中
radius: '35%', //设置转速油表仪表盘的大小
min: 0, //设置转速仪表盘的最小值
max: 7, //设置转速仪表盘的最大值
endAngle: 45,
splitNumber: 7, //设置转速仪表盘的分隔数目为7
title: { offsetCenter: [0, '-30%'] },
data: [
{
value: 1.5,
name: '转速',
},
],
},
{
//设置数据系列之3：油表
name: '油表',
type: 'gauge',
center: ['77%', '50%'], //设置油表仪表盘中心点的位置，默认全局居中
radius: '25%', //设置油表仪表盘的大小
min: 0, //设置油表仪表盘的最小值
max: 2, //设置油表仪表盘的最小值
startAngle: 135,
endAngle: 45,
splitNumber: 2, //设置油表的分隔数目为2
axisLabel: {
formatter: function (v: any) {
switch (v + '') {
case '0':
return 'E'
case '1':
return '油表'
case '2':
return 'F'
}
},
},
title: { show: false },
detail: { show: false },
data: [{ value: 0.5, name: 'gas' }],
},
{
//设置数据系列之4：水表
name: '水表',
type: 'gauge',
center: ['77%', '50%'], //设置水表仪表盘中心点的位置，默认全局居中
radius: '25%', //设置水表仪表盘的大小
min: 0, //设置水表的最小值
max: 2, //设置水表的最大值
startAngle: 315,
endAngle: 225,
splitNumber: 2, //设置分隔数目
axisLabel: {
formatter: function (v: any) {
switch (v + '') {
case '0':
return 'H'
case '1':
return '水表'
case '2':
return 'C'
}
},
},
title: { show: false },
detail: { show: false },
data: [{ value: 0.5, name: 'gas' }],
},
],
}
myChart.setOption(option)
}
},
}至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。