option = {
//你的代码
//你的代码
grid: {
left: "2%",
// width: "100%",
bottom: "5%",
top: "5%",
containLabel: true,
},
xAxis: {
type: "value",
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
axisLine: { show: false }
},
yAxis: {
type: "category",
position: "left",
inverse: true,
axisLine: {
lineStyle: {
color: 'rgba(134, 144, 156, 1)',
width: 1,
type: 'solid'
},
show: true
},
axisLabel: {
interval: 0,
color: "rgba(134, 144, 156, 1)",
fontSize: 14
},
data: [
"登录",
"上报事件",
"审核",
"测试",
"测试"
],
axisTick: { show: false }
},
series: [
{
data: [
{
value: 10,
itemStyle: {
barBorderRadius: [0, 13, 13, 0],
color: {
type: "linear",
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#67C23A", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(103, 194, 58, 0)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
}, // 第一个数据项的颜色
},
{
value: 14,
itemStyle: {
barBorderRadius: [13, 13, 13, 13],
color: {
type: "linear",
x: 1,
y: 2,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#14C9C9", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(20, 201, 201, 0)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
}, // 第二个数据项的颜色
},
{
value: 7,
itemStyle: {
barBorderRadius: [13, 13, 13, 13],
color: {
type: "linear",
x: 1,
y: 2,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#3491FA", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(52, 145, 250, 0)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
}, // 第三个数据项的颜色
},
{
value: 16,
itemStyle: {
barBorderRadius: [13, 13, 13, 13],
color: {
type: "linear",
x: 1,
y: 2,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#165DFF", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(22, 93, 255, 0)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
}, // 第三个数据项的颜色
},
{
value: 12,
itemStyle: {
barBorderRadius: [13, 13, 13, 13],
color: {
type: "linear",
x: 1,
y: 2,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#86909C", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(134, 144, 156, 0)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
}, // 第三个数据项的颜色
},
{
value: 8,
itemStyle: {
barBorderRadius: [13, 13, 13, 13],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#08B8EF", // 0% 处的颜色
},
{
offset: 1,
color: "#08EFF3", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
}, // 第三个数据项的颜色
},
],
type: "bar",
barWidth: 12,
barGap: "-100%",
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "right", //在上方显示
verticalAlign: "bottom",
lineHeight: 0,
color: ["#4E5969"],
fontSize: 14,
textStyle: { color: "#4E5969" }
}
}
},
},
],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(17,95,182,0.5)",
textStyle: {
color: "#49D2FC",
},
axisPointer: {
type: "none",
},
formatter: (params) => {
return `${params[0].name}<br />${params[0].value}`;
},
},
};