option = {
backgroundColor: '#32374d',
title: [{
text: '能力进度条',
x: '50%',
y: 30,
textAlign: 'center',
textStyle: {
fontSize: '30',
fontWeight: '100',
color: '#FFF',
textAlign: 'center',
},
}, ],
legend: {
top: '16%',
textStyle: {
color: '#a4a8b4'
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
top: '25%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
// margin: 10,
color: '#a4a8b4',
}
},
yAxis: {
type: 'category',
data: ['团队管理能力', '增员能力', '开单能力', '获客能力', '工作态度'],
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
// margin: 10,
color: '#a4a8b4',
}
},
color: [
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(235,112,236,.8)'
},
{
offset: 0.8,
color: 'rgba(77,75,221,.8)'
},
{
offset: 1,
color: 'rgba(77,75,221,0)'
}
]),
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(255,157,96,.8)'
},
{
offset: 0.8,
color: 'rgba(246,84,157,.8)'
},
{
offset: 1,
color: 'rgba(246,84,157,0)'
}
]),
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(132,225,145,.8)'
},
{
offset: 0.8,
color: 'rgba(106,185,242,.8)'
},
{
offset: 1,
color: 'rgba(106,185,242,0)'
}
]),
],
series: [{
name: '',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
data: [100, 100, 100, 100, 100, ],
// barWidth: 5,
barGap:'-100',
itemStyle: {
normal: {
color: 'rgba(255, 255, 255, .1)',
},
},
z: 1
},
{
name: '实际进度',
type: 'bar',
stack: 'Tik Tok',
// barWidth: 25,
barGap:'-100',
itemStyle: {
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(240,82,255,1)'
},
{
offset: 0.8,
color: 'rgba(77,75,221,1)'
},
{
offset: 1,
color: 'rgba(77,75,221,0)'
}
],
false
),
borderWidth: 1,
},
label: {
normal: {
show: true,
// position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1,
}
},
},
data: [23, 19, 6, 17, 20, ]
},
{
name: '平均进度',
type: 'bar',
stack: 'Tik Tok',
// barWidth: 25,
barGap:'-100',
itemStyle: {
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(255,151,60,.8)'
},
{
offset: 0.8,
color: 'rgba(246,84,157,.8)'
},
{
offset: 1,
color: 'rgba(246,84,157,0)'
}
],
false
),
borderWidth: 1,
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1,
}
},
},
data: [38, 36, 44, 33, 20, ]
},
{
name: '榜样进度',
type: 'bar',
stack: 'Tik Tok',
// barWidth: 25,
barGap:'-100',
itemStyle: {
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(102,255,124,.8)'
},
{
offset: 0.8,
color: 'rgba(106,185,242,.8)'
},
{
offset: 1,
color: 'rgba(106,185,242,0)'
}
],
false
),
borderWidth: 1,
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1,
}
},
},
data: [39, 45, 50, 50, 60, ]
},
{
name: '',
type: 'bar',
data: [100, 100, 100, 100, 100, ],
barWidth: 10,
itemStyle: {
normal: {
color: 'rgba(255, 255, 255, .1)',
},
},
z: 1
},
]
};
echarts横向倒叙柱状图
最新推荐文章于 2024-06-05 13:29:25 发布