option = {
title: {
text: '能力进度条',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['实际进度', '平均进度', '榜样进度']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
data: ['工作态度', '获客能力', '开单能力', '增员能力', '团队管理能力', '高客拓展能力', '学习能力'],
axisTick: {
show: false
},
inverse: true,
axisLine: {
show: false
}
},
series: [{
name: '榜样进度',
type: 'bar',
barGap: '-100%',
barCategoryGap: '70%',
/*多个并排柱子设置柱子之间的间距*/
// barCateGoryGap:1, //关键第二句:值或为百分比 ‘60%’ ,如果同一类目下的柱间距:barGap:2
itemStyle: {
normal: {
color: 'rgba(128,128,128,1)',
label: {
formatter: "\n\n\n\n\n\n榜样进度",
show: true,
position: 'insideRight',
textStyle: {
fontSize: 9,
fontFamily: 'Microsoft YaHei',
fontStyle: 'normal',
fontWeight: 'bold'
}
},
}
},
data: [100, 100, 100, 100, 100, 100, 100],
markPoint: {
symbol:
'path://M708.49298 138.982839l-140.580343-119.812792c-33.547582-25.560062-81.472699-25.560062-115.020281 0l-140.580344 119.812792c-17.572543 17.572543-20.767551 43.132605-4.792511 59.107645s43.132605 20.767551 59.107644 4.792511l102.24025-84.667706v862.652106c0 25.560062 17.572543 43.132605 43.132605 43.132605s43.132605-17.572543 43.132605-43.132605V123.0078l102.24025 84.667707c4.792512 4.792512 17.572543 7.98752 25.560062 7.98752 12.780031 0 25.560062-4.792512 33.547582-17.572543 12.780031-15.975039 12.780031-41.535101-7.987519-59.107645z',
symbolKeepAspect: true,
symbolSize: [10, 65],
label: {
position: "insideTop",
// distance: 7,
show: false
},
data: [{
xAxis: 100,
yAxis: 0
},
{
xAxis: 100,
yAxis: 1
},
{
xAxis: 100,
yAxis: 2
},
{
xAxis: 100,
yAxis: 3
},
{
xAxis: 100,
yAxis: 4
},
{
xAxis: 100,
yAxis: 5
},
{
xAxis: 100,
yAxis: 6
}
]
}
},
{
name: '平均进度',
type: 'bar',
barGap: '-100%',
barCategoryGap: '70%',
/*多个并排柱子设置柱子之间的间距*/
// barCateGoryGap:1, //关键第二句:值或为百分比 ‘60%’ ,如果同一类目下的柱间距:barGap:2
itemStyle: {
normal: {
color: 'green',
label: {
formatter: "\n\n\n\n\平均进度",
show: true,
position: 'insideRight',
textStyle: {
fontSize: 9,
fontFamily: 'Microsoft YaHei',
fontStyle: 'normal',
fontWeight: 'bold'
}
},
}
},
data: [30, 40, 50, 60, 40, 50, 60],
markPoint: {
symbol:
'path://M708.49298 138.982839l-140.580343-119.812792c-33.547582-25.560062-81.472699-25.560062-115.020281 0l-140.580344 119.812792c-17.572543 17.572543-20.767551 43.132605-4.792511 59.107645s43.132605 20.767551 59.107644 4.792511l102.24025-84.667706v862.652106c0 25.560062 17.572543 43.132605 43.132605 43.132605s43.132605-17.572543 43.132605-43.132605V123.0078l102.24025 84.667707c4.792512 4.792512 17.572543 7.98752 25.560062 7.98752 12.780031 0 25.560062-4.792512 33.547582-17.572543 12.780031-15.975039 12.780031-41.535101-7.987519-59.107645z',
symbolKeepAspect: true,
symbolSize: [10, 65],
label: {
position: "insideTop",
// distance: 7,
show: false
},
data: [{
xAxis: 30,
yAxis: 0
},
{
xAxis: 40,
yAxis: 1
},
{
xAxis: 50,
yAxis: 2
},
{
xAxis: 60,
yAxis: 3
},
{
xAxis: 40,
yAxis: 4
},
{
xAxis: 50,
yAxis: 5
},
{
xAxis: 60,
yAxis: 6
}
]
}
},
{
name: '实际进度',
type: 'bar',
barGap: '-100%',
barCategoryGap: '70%',
/*多个并排柱子设置柱子之间的间距*/
// barCateGoryGap:1, //关键第二句:值或为百分比 ‘60%’ ,如果同一类目下的柱间距:barGap:2
itemStyle: {
normal: {
color: 'red',
label: {
formatter: "\n\n\实际进度",
show: true,
position: 'insideRight',
textStyle: {
fontSize: 9,
fontFamily: 'Microsoft YaHei',
fontStyle: 'normal',
fontWeight: 'bold'
}
},
}
},
data: [50, 60, 30, 50, 100, 40, 65],
markPoint: {
symbol:
'path://M708.49298 138.982839l-140.580343-119.812792c-33.547582-25.560062-81.472699-25.560062-115.020281 0l-140.580344 119.812792c-17.572543 17.572543-20.767551 43.132605-4.792511 59.107645s43.132605 20.767551 59.107644 4.792511l102.24025-84.667706v862.652106c0 25.560062 17.572543 43.132605 43.132605 43.132605s43.132605-17.572543 43.132605-43.132605V123.0078l102.24025 84.667707c4.792512 4.792512 17.572543 7.98752 25.560062 7.98752 12.780031 0 25.560062-4.792512 33.547582-17.572543 12.780031-15.975039 12.780031-41.535101-7.987519-59.107645z',
symbolKeepAspect: true,
symbolSize: [10, 65],
label: {
position: "insideTop",
// distance: 7,
show: false
},
data: [{
xAxis: 50,
yAxis: 0
},
{
xAxis: 60,
yAxis: 1
},
{
xAxis: 30,
yAxis: 2
},
{
xAxis: 50,
yAxis: 3
},
{
xAxis: 100,
yAxis: 4
},
{
xAxis: 40,
yAxis: 5
},
{
xAxis: 65,
yAxis: 6
}
]
}
}
]
}