option = {
series: [
{
type: 'gauge',
detail: { formatter: '{value}%' }, // 仪表盘的详情配置，例如显示数值百分比
data: [{ value: 50, name: 'Completion Rate' }] // 仪表盘的数据项，包括值和名称
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
在上述代码中，type: 'gauge' 表示这是一个仪表盘。detail 配置项用于设置仪表盘的详情信息，可以通过 {value} 来显示数值。data 数组包含了仪表盘的数据项，每个数据项是一个对象，包含 value 表示数值和 name 表示名称。
除了上述基本配置，仪表盘还有一些其他属性可供调整，例如：
- min、max：指定仪表盘的最小和最大值。
- radius：指定仪表盘的半径。
- splitNumber：分割段数，用于将仪表盘的刻度线分成几段。
- axisLine：仪表盘轴线的配置。
- axisLabel：刻度标签的配置。
- splitLine：分隔线的配置。
- pointer：指针的配置。
- title：标题的配置。
下面是一个更完整的仪表盘配置的例子：
option = {
series: [
{
type: 'gauge',
radius: '80%',
min: 0,
max: 100,
splitNumber: 10,
startAngle: 220,
endAngle: -40,
axisLine: {
lineStyle: {
width: 10,
color: [
[0.2, '#67e0e3'],
[0.8, '#37a2da'],
[1, '#fd666d']
]
}
},
axisLabel: {
textStyle: {
color: '#999',
fontSize: 10
}
},
splitLine: {
length: 15,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
title: {
show: true,
offsetCenter: [0, '-40%'],
textStyle: {
color: '#999',
fontSize: 15
}
},
detail: {
formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: {
color: 'auto',
fontSize: 20
}
},
data: [{ value: 50, name: 'Completion Rate' }]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
在这个例子中，通过设置不同的配置项，包括轴线样式、刻度标签样式、分隔线样式、指针宽度、标题样式等，可以调整仪表盘的显示效果。
转载请注明出处：http://www.zyzy.cn/article/detail/5444/ECharts