先附上预期效果图片
echarts 使用起来还是比较方便的,创建图表的时候先导入
//然后指定你要创建图表所在的div
//在javascript中完成初始化
var aerobic = echarts.init(document.getElementById('aerobic'));
loadBarChart2(aerobic,"有氧运动 分钟",600,0,120,3,timedata1,aerobicdata,"#C0E4FF");
//加载年柱状图
function loadBarChart2(lineChart,text,max,min,interval,width,timedata,data,color) {
lineOption = {
title: {
text: text,
//标题样式设置
textStyle:{
fontSize:15,
fontFamily: '微软雅黑',
fontWeight: 'normal',
color:'#b1b1b1'
}
},
tooltip: {
trigger: 'axis',
//这里给tooltip添加了垂直的辅助虚线
axisPointer: {
type: 'line',
lineStyle: {
type: 'dashed'
}
}
},
grid: {
left: '0%',
right: '0.5%',
bottom: '0%',
top:'20%',
containLabel: true
},
//X轴设置
xAxis: {
axisTick: {
show: false
},
type : 'category',
//网格线
splitLine: {
show:false,
lineStyle: {
// 使用深浅的间隔色
color: ['#b1b1b1']
}
},
axisLine:{
lineStyle:{
color:'#b1b1b1',
width:1,//这里是为了突出显示加上的
}
},
axisLabel : {
interval:8,//横轴信息全部显示
textStyle: {
color: '#b1b1b1'
}
},
//X轴数据
data : timedata
},
//Y轴设置
yAxis: {
axisTick: {
show: false
},
type : 'value',
max:max,//Y轴最大值
min:min,//Y轴最小值
interval:interval,//增长间隔
//Y轴网格线
splitLine: {
show:true,
lineStyle: {
// 使用深浅的间隔色
color: ['#b1b1b1']
}
},
axisLine:{
lineStyle:{
color:'#b1b1b1',
width:1,//这里是为了突出显示加上的
}
},
axisLabel : {
interval:0,//Y轴信息全部显示
textStyle: {
color: '#b1b1b1'
}
}
},
series: [{
name: text,
type: 'bar',
barMaxWidth: width,
stack: text,
itemStyle: {
normal: {
color: color
}
},
//Y轴数据
data: data,
},
]
};
//加载图表
lineChart.clear();
lineChart.setOption(lineOption );
}