不同于可视化开发中常见的饼状图、折线图、柱状图，仪表盘所用的例子相对比较少。当我们遇到需要用仪表盘的形式展示数据的需求时，应该怎么配置ECharts的选项数据呢？
编辑
其实实现思路也是大同小异的，我们可以在series一个个配置所需绘制的图形。
绘制最内层
{
name: '最内层',
type: 'gauge',
startAngle: 190,
endAngle: -10,
radius: '94%',
center: ['50%', '80%'],
axisLine: {
lineStyle: {
color: [[1, '#DCE1E5']],
width: 1,
},
},
splitLine: {
show: false,
},
anchor: {
show: false,
showAbove: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
detail: {
show: false,
},
title: {
show: false,
},
data: [
{
value: 0,
},
],
},
绘制最外层
{
name: '最外层',
type: 'gauge',
startAngle: 190,
endAngle: -10,
radius: '125%',
center: ['50%', '80%'],
axisLine: {
lineStyle: {
color: [[1, '#DCE1E5']],
width: 2,
},
},
splitLine: {
show: false,
},
anchor: {
show: false,
showAbove: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
detail: {
show: false,
},
title: {
show: false,
},
data: [
{
value: 0,
},
],
},
绘制表盘
{
name: '保护状态',
type: 'gauge',
min: 0, // 起始最小刻度值
max: orgData.max, // 最大刻度值
startAngle: 190,
endAngle: -10,
radius: '110%',
center: ['50%', '80%'],
axisLine: {
lineStyle: {
width: 18,
color: [
[
orgData.handled / orgData.max,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: '#CFE2FF',
},
{
offset: 1,
color: '#2681FF',
},
]),
],
[1, '#F56F63'],
],
},
},
pointer: {
length: '80%',
itemStyle: {
color: 'auto',
},
},
axisTick: {
distance: -25,
length: 5,
lineStyle: {
color: '#DCE1E5',
width: 1,
},
},
splitLine: {
distance: -32,
length: 10,
lineStyle: {
color: '#DCE1E5',
width: 2,
},
},
anchor: {
show: true,
showAbove: true,
size: 18,
itemStyle: {
borderWidth: 8,
color: 'auto',
borderColor: '#B0D0FF',
},
},
axisLabel: {
show: false,
color: '#464646',
fontSize: 16,
distance: -20,
rotate: 'tangential',
formatter: function (value) {
if (value < orgData.handled) {
return '已处理';
} else {
return '未处理';
}
},
},
title: {
offsetCenter: [0, '-38%'],
fontSize: 20,
color: '#555555',
},
detail: {
show: true,
color: '#464646',
fontSize: 16,
offsetCenter: [0, '-20%'],
},
data: [
{
value: orgData.data || 0,
name: '已处理问题',
},
],
},
至此完成上图仪表盘的绘制^-^
