配置项如下
var data1= ['50', '60', '30']
var data2= ['40', '60', '20']
var data3= ['30', '50', '10']
var data4= ['40', '60', '20']
var data5= ['30', '50', '10']
option={
backgroundColor:"#fff",
tooltip: {
// trigger: 'axis',
// axisPointer: { // 坐标轴指示器,坐标轴触发有效
// type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
// }
},
legend: {
show:false
},
// 年度完成率和季度完成率颜色
color:['#071960','#1740B4','#02DF82','#F87A0F','#FF3574'],
grid: {
left: '3%',
right: '4%',
top:'10%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#1B3F81'
}
},
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
margin:15,
textStyle: {
color: '#6B9DD7',
fontStyle: 'normal',
fontSize: 14,
}
},
data: ['第一次', '第二次', '第三次']
}
],
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
margin:15,
textStyle: {
color: '#6B9DD7',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 14,
}
},
axisLine: {
lineStyle: {
color: '#1B3F81'
}
},
splitLine: {
lineStyle: {
color: "#1B3F81",
},
},
},
// {
// name: '比率(%)',
// // 单位 显示位置
// // nameLocation: 'start',
// type: 'value',
// axisLabel: { //坐标轴刻度标签的相关设置。
// interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
// margin:15,
// formatter: '{value}%',
// textStyle: {
// color: '#6B9DD7',
// fontStyle: 'normal',
// fontFamily: '微软雅黑',
// fontSize: 14,
// }
// },
// axisLine: {
// lineStyle: {
// color: '#1B3F81'
// }
// },
// splitLine: {
// lineStyle: {
// color: "#1B3F81",
// },
// },
// }
],
series: [
{
name: '年度指标',
type: 'bar',
yAxisIndex:0,
barWidth:'40px',
itemStyle: {
normal: {
show: true,
borderWidth: 0,
}
},
data:data1
},
{
name: '半年指标',
type: 'bar',
yAxisIndex: 0,
itemStyle: {
normal: {
show: true,
borderWidth: 0,
}
},
barWidth:'40px',
data: data2
},
{
name: '完成值',
type: 'bar',
yAxisIndex: 0,
barWidth:'40px',
itemStyle: {
normal: {
show: true,
borderWidth: 0,
}
},
data: data3
}
// ,{
// name:'年度完成率',
// type:'line',
// yAxisIndex: 1,
// symbolSize:6,
// data: data4
// },{
// name:'季度完成率',
// type:'line',
// yAxisIndex: 1,
// symbolSize:6,
// data:data5
// },
]
};