var option={
legend: {
data:[‘北清线’,‘985线’,‘211线’,‘一本线’,‘二本线’,‘本科线’],
selectedMode:false, //图例禁止点击 top:20,
itemWidth:23,
itemHeight:6,
textStyle: {
color: ‘#707070’,
fontStyle: ‘normal’,
fontWeight: ‘normal’,
fontFamily: ‘sans-serif’,
fontSize: 11,
},
},
title: {
name: list.name
},
toolbox: {
show: false
},
grid: {
z:1, //grid作为柱状图的坐标系，其层级要和仪表图层级不同，同时隐藏 show:false,
left: ‘-30%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true,
splitLine:{
show: false //隐藏分割线
},
},
xAxis : [
{
type : ‘category’,
data : [],
axisLine: {show: false },
splitLine:{show: false },
splitArea: {
interval: ‘auto’,
show: false
}
}
],
yAxis : [
{
type : ‘value’,
axisLine: {show: false },
splitLine:{show: false },
}
],
series: [
{
name: ‘业务指标’,
type: ‘gauge’,
min: 0,//刻度值
max: 750,
splitNumber: 6,//间隔区域的显示数量
detail: {formatter: ‘{value}’},
data: [{value: list.qz, name: list.name}],
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
color: ‘#000’,
fontSize: 10, //改变仪表盘内刻度数字的大小
shadowColor : ‘#000’, //默认透明
},
formatter: function(v){
return v.toFixed(0);
},
},
axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式width: 10,
lineStyle: { // 属性lineStyle控制线条样式color: ‘#cdcdcd’}
color:[
[0.16,‘rgb(217 0 27)’],
[0.32,‘rgb(236 128 141)’],
[0.48,‘rgb(245 154 35)’],
[0.64,‘rgb(129 211 248)’],
[0.8,‘rgb(2 125 180)’],
[1,‘rgb(202 249 130)’],
]
},
},
},
{
name:‘北清线’,
type:‘bar’,
barWidth: ‘60%’,
itemStyle: {
normal: {
color: ‘rgb(217 0 27)’
}
},
},
{
name:‘985线’,
type:‘bar’,
barWidth: ‘60%’,
itemStyle: {
normal: {
color: ‘rgb(236 128 141)’
}
},
},{
name:‘211线’,
type:‘bar’,
barWidth: ‘60%’,
itemStyle: {
normal: {
color: ‘rgb(245 154 35)’
}
},
},{
name:‘一本线’,
type:‘bar’,
barWidth: ‘60%’,
itemStyle: {
normal: {
color: ‘rgb(129 211 248)’
}
},
},{
name:‘二本线’,
type:‘bar’,
barWidth: ‘60%’,
itemStyle: {
normal: {
color: ‘rgb(2 125 180)’
}
},
},{
name:‘本科线’,
type:‘bar’,
barWidth: ‘60%’,
itemStyle: {
normal: {
color: ‘rgb(202 249 130)’
}
},
}
]
};
return option;
效果图：
强力驱动