效果图:
分析:
仪表盘没有图例,可以使用柱状图的图例legend属性,将2个图叠加,在将柱状图除了图例部分全部设置为隐藏,同时禁用legend的点击事件;
代码:
const option = {
legend: {
orient: 'vertical', // 竖排展示
align: 'left', // 图标在前,文字在后
icon: 'circle', // 图标圆形
itemHeight: 12,
itemWidth: 12,
bottom: '2%',
fontStyle: {
color: '#8C8C8C',
},
//配置legend,这里的data,要对应type为‘bar’的series数据项的‘name’名称,作为图例的说明
data: ['aaaa','bbbb'], // 对应的图例名称
selectedMode: false, //图例禁止点击
},
xAxis: [ //这里有很多的show,必须都设置成不显示
{
type: 'category',
data: [],
axisLine: {
show: false
},
splitLine: {
show: false
},
splitArea: {
interval: 'auto',
show: false
}
}
],
yAxis: [ //这里有很多的show,必须都设置成不显示
{
type: 'value',
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
}
],
toolbox: {
show: false,
},
tooltip: {
show: false,
// formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
type: 'gauge', // 仪表盘
startAngle: 180, // 仪表盘起始角度:正右手侧为0度,正上方为90度,正左手侧为180度。
endAngle: 0, // 仪表盘结束角度。
center: ['50%', '60%'], // (圆心)坐标
data: [{ value: this.fenToYuan(this.totalDeduction) }], // 数据值
min: 0,
max: this.userDeduction, // 最大数值
radius: '85%', // 仪表盘半径
itemStyle: {
color: '#73A0FA', // 进度条颜色
},
progress: {
show: true, // 是否显示进度条
width: 30, // 进度条宽度
},
axisLine: {
show: true, // 是否显示仪表盘轴线
lineStyle: {
width: 30, // 仪表盘轴线宽度(灰色的背景)
},
},
pointer: {
show: false, // 仪表盘指针
},
splitNumber: 1, // 仪表盘刻度的分割段数
axisTick: {
show: false, // 刻度
},
splitLine: {
show: false, // 分隔线
},
// 刻度标签
axisLabel: {
distance: -38, // 标签与刻度线的距离
padding: [30, 0, 0, 23], // [上, 右, 下, 左]的边距
color: '#999',
fontSize: 12,
formatter: function (value) {
if (value) {
value = value.toLocaleString('en-US', {
maximumFractionDigits: 2,
minimumFractionDigits: 2,
});
}
return value;
},
rich: {},
},
anchor: {
show: false, // 表盘中指针的固定点
},
title: {
show: false, // 仪表盘标题
},
// 仪表盘详情,用于显示数据
detail: {
valueAnimation: true, // 开启标签的数字动画
width: '60%',
lineHeight: 40,
offsetCenter: [0, '-15%'], // 相对于仪表盘中心的偏移位置 [水平方向,垂直方向]
fontSize: 24,
fontWeight: 'bold',
formatter: function (value) {
let str = value.toString();
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
return str.replace(reg, '$1,');
},
color: '#111A34',
},
},
{
name: 'aaaa',
type: 'bar',
barWidth: '30%', //不显示,可以随便设置
data: [0],
itemStyle: {
normal: {
color: '#bfcef5', //这里的图例要注意,颜色设置和仪表盘的颜色对应起来
}
}
},
{
name: 'bbbb',
type: 'bar',
barWidth: '60%',
data: [0],
itemStyle: {
normal: {
color: '#73A0FA',
}
}
}
],
};
myChart.setOption(option); // 为echarts对象加载数据