直接上图
横向的,可以放到组件的,不需要太高
option = {
grid: { left: '5%', top: '5', right: '25%', bottom: '5' },
xAxis: {
type: 'value',
show: false,
max: 100, // 最大值值用机组的maxNumber,保证柱子背景长度
},
yAxis: [
{
type: 'category',
position: 'right',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#333333',
},
formatter: function (params) {
return `${params}`;
},
},
data: ['25'],
},
],
series: [
{
name: '正数',
type: 'bar',
stack: '总量',
barWidth: 12,
barMinHeight: 20,
silent: true, // 禁止点击事件
showBackground: true,
backgroundStyle: {
// 柱子背景设置
borderRadius: [30, 30, 30, 30],
color: '#e7e7e7',
},
emphasis: {
focus: 'series',
},
data: ['25'],
itemStyle: {
normal: {
barBorderRadius: [30, 30, 30, 30],
label: {
show: false,
position: 'right',
formatter: function (params) {
var val1 = params.value + '' + unit;
return val1;
},
},
color:'yellow',
},
},
},
{
name: '正数',
type: 'bar',
stack: '总量',
barWidth: 12,
barMinHeight: 20,
silent: true, // 禁止点击事件
showBackground: true,
backgroundStyle: {
// 柱子背景设置
borderRadius: [30, 30, 30, 30],
color: '#e7e7e7',
},
emphasis: {
focus: 'series',
},
data: ['15'],
itemStyle: {
normal: {
label: {
show: false,
position: 'right',
formatter: function (params) {
var val1 = params.value + '' + unit;
return val1;
},
},
color: 'red'
},
},
},
{
name: '正数',
type: 'bar',
stack: '总量',
barWidth: 12,
barMinHeight: 20,
silent: true, // 禁止点击事件
showBackground: true,
backgroundStyle: {
// 柱子背景设置
borderRadius: [30, 30, 30, 30],
color: '#e7e7e7',
},
emphasis: {
focus: 'series',
},
data: ['15'],
itemStyle: {
normal: {
label: {
show: false,
position: 'right',
formatter: function (params) {
var val1 = params.value + '' + unit;
return val1;
},
},
color: 'green'
},
},
},
{
name: '正数',
type: 'bar',
stack: '总量',
barWidth: 12,
barMinHeight: 20,
silent: true, // 禁止点击事件
showBackground: true,
backgroundStyle: {
// 柱子背景设置
borderRadius: [30, 30, 30, 30],
color: '#e7e7e7',
},
emphasis: {
focus: 'series',
},
data: ['15'],
itemStyle: {
normal: {
label: {
show: false,
position: 'right',
formatter: function (params) {
var val1 = params.value + '' + unit;
return val1;
},
},
color: 'blue'
},
},
},
],
};