配置项如下
var timeArr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
var bgArr = [
["#cd0252","#7e0022"],
["#c90384","#9a014e"],
["#fd524e","#ff0200"],
["#ffb503","#ff7e01"],
["#fefe1b","#ffff03"]
]
var dataArr = [];
var barW = ($('#main').width()/timeArr.length)-20;
for(var i=0;i<timeArr.length;i++){
dataArr.push(
{
value:200+(i*10),
itemStyle:{
normal:{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: bgArr[i%5][0]
}, {
offset: 1,
color: bgArr[i%5][1]
}
])
}
}
}
)
}
var option = {
title: {
text: '实时AQI24小时柱状图',
x : '4%',
y : '5',
textStyle:{
color: 'white',
fontSize:'24',
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '50px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
data:timeArr,
axisLine: {
lineStyle: {
color: "black"
}
},
axisTick : false
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "black"
}
},
axisTick : false,
splitLine : {
show : true,
lineStyle : {
type : 'dashed',
color : '#54575a'
}
},
isLabel:{ //调整x轴的lable
textStyle:{
fontSize:25 // 让字体变大
}
},
},
series:[ //统一设置圈圈与线的颜色
{
type:'bar',
barWidth : barW,
data:dataArr
}
]
};
myChart.setOption(option);
$(window).resize(function(){
myChart.resize()
})