配置项如下
var getname = ['生均图书(册/生)', '生均占地面积(平方米/生)', '生均宿舍面积(平方米/生)', '生均实践场所(平方米/生)', '生均年进书量(册)']; //数据点名称
var getbxsj = [42, 50, 89, 62, 98]; //本校数据
var getdbwd = [70, 56, 86, 78, 72]; //全国示范院校平均数
var getdbz = [55, 49, 80, 60, 90];//达标数据
var seriescolor = ['#03C9AC', '#4B96F3', '#FF6061'];
option = {
grid: {
top: '40',
right: '15',
left: '50',
bottom: '30'
},
tooltip: {
trigger: 'axis',
extraCssText: 'padding-left:8px;line-height:30px;width:220px;height:100px;background:rgba(255,255,255,1);box-shadow:1px 5px 20px 0px rgba(1,11,19,0.2);border-radius:6px;',
axisPointer: {
type: 'none'
},
textStyle: {
fontSize: '14',
color: '#666',
},
formatter: function(params) {
var str = ''; //声明一个变量用来存储数据
str += '<div>' + params[0].name + '</div>';
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName == '全国示范院校平均数') {
if (str.indexOf("全国示范院校平均数") == -1) {
str += '<span style="display:inline-block;margin-right:5px;margin-bottom:2px;width:6px;height:6px;border-radius:50%;background-color:' + seriescolor[0] + ';"></span>' + params[i].seriesName + '</span> : <span>' + params[i].value + '</br>';
}
} else if (params[i].seriesName == '本校数据') {
if (params[i].value >= getdbz[params[i].dataIndex]) {
str += '<span style="display:inline-block;margin-right:5px;margin-bottom:2px;width:6px;height:6px;border-radius:50%;background-color:' + seriescolor[1] + ';"></span>' + params[i].seriesName + '</span> : <span>' + params[i].value + '</br>';
} else {
str += '<span style="display:inline-block;margin-right:5px;margin-bottom:2px;width:6px;height:6px;border-radius:50%;background-color:' + seriescolor[2] + ';"></span>' + params[i].seriesName + '</span> : <span>' + getbxsj[params[i].dataIndex] + '(达标值:'+getdbz[params[i].dataIndex]+')</br>';
}
}
}
return str;
}
},
legend: {
show:false,
data: ["本校数据", "全国示范院校平均数"],
type: "scroll",
//icon: 'ret',
height: '88%',
right: '20',
top: '10',
itemGap: 25,
itemWidth: 14,
itemHeight: 14,
textStyle: {
fontSize: '13',
color: '#666',
},
},
xAxis: [{
data: getname,
axisLabel: {
margin: 10,
color: '#333333',
textStyle: {
fontSize: 13
},
},
axisLine: {
lineStyle: {
color: '#333333',
}
},
axisTick: {
show: false
},
}],
yAxis: [{
//name: '单位:万元',
nameTextStyle: {
color: '#333333',
fontSize: 13
},
axisLabel: {
color: '#333333',
textStyle: {
fontSize: 13
},
},
axisLine: {
lineStyle: {
color: '#333333',
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#D1D1D1',
}
}
}],
animation: false,
series: [{
name: "本校数据",
type: 'bar',
data: getbxsj,
barWidth: '20px',
itemStyle: {
normal: {
color:function(params) {
if(params.value>=getdbz[params.dataIndex]){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#5FBEFF'
}, {
offset: 1,
color: '#589AFC'
}], false)
}else{
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FF7D7E'
}, {
offset: 1,
color: '#FF6266'
}], false)
}},
barBorderRadius: [5, 5, 0, 0],
}
},
}, {
name: "全国示范院校平均数",
type: 'bar',
data: getdbwd,
barWidth: 20,
zlevel: 2,
barGap: '70%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#02D1C2'
}, {
offset: 1,
color: '#0BC198'
}], false),
barBorderRadius: [5, 5, 0, 0],
}
},
}]
};