html代码如下:
<div class="strip_out">
<div class="strip" id="strip_5"></div>
</div>
js代码如下:
var myChart5=echarts.init(document.getElementById("strip_5"),"macarons");
myChart5.showLoading(); //显示缓冲遮盖层
$.ajax({
url: path+"/web/api/index/getStudentConsumption",
type: "post",
data: {
sno:'${sno}',
accessToken:'${accessToken}'
},
success: function(msg){
if(msg.type=="success"){
fetchData5(msg);
fetchData6(msg);
}else{
fetchData5(msg);
fetchData6(msg);
}
}
});
function fetchData5(result) {
myChart5.hideLoading(); //隐藏遮盖层
myChart5.setOption({
title:{text: '消费平均图' },
tooltip: {
show: true
},
toolbox: {
show: true,
feature: {
mark: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
saveAsImage: { show: true }
}
},
dataZoom: {
show: true,
start : 20,
end : 100
},
legend:{
orient: 'vertical',
x:'right',
y:'center',
align:'left',
data:["奢侈消费平均额","基本消费平均额"],
tooltip:{
show:true
}
},
grid: {
right: 120
},
xAxis:[{
data:(function(){
var arr=[];
for(var i=0;i<result.data.length;i++){
arr.push({
value:formatDate(result.data[i].vestingDate)
});
}
return arr;
})(),
axisLabel:{
textStyle:{
color:'#222',
fontSize:16
}
},
lineStyle:{
color:'#ddd',
width:1
},
splitLine:{
show:false
},
}],
yAxis:[{
type:'value',
axisLabel:{formatter:'{value} 元'}
}],
series:[{
name:"奢侈消费平均额",
type:"line",
data:(function(){
var arr=[];
for(var i=0;i<result.data.length;i++){
arr.push({
value:result.data[i].avgLuxuryConsumption*0.01
});
}
return arr;
})(),
symbolSize:8,
itemStyle:{
normal:{
label:{
show:false,
position:'right',
textStyle:{
color:"#666",
fontSize:16
},
}
}
}
},
{
name:"基本消费平均额",
type:"line",
data:(function(){
var arr=[];
for(var i=0;i<result.data.length;i++){
arr.push({
value:result.data[i].avgConsumption*0.01
});
}
return arr;
})(),
itemStyle:{
normal:{
label:{
show:false,
position:'right',
textStyle:{
color:"#666",
fontSize:16
},
}
}
}
}]
});
};
通过在echarts中加入:
tooltip:动态显示详情
toolbox:加载动态切换折线、柱形图,添加下载功能
dataZoom:实现根据Y轴左右拉动显示功能
tooltip: {
show: true
},
toolbox: {
show: true,
feature: {
mark: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
saveAsImage: { show: true }
}
},
dataZoom: {
show: true,
start : 20,
end : 100
},