1. 程式人生 > >echarts相關

echarts相關

BE pre 數據 對象 bsp TP bubuko date sla

1.如果X軸顯示不完全怎麽班?

技術分享圖片

grid: {
y2: 140
},
axisLabel:{
interval:0,//橫軸信息全部顯示
rotate:-30,//-30度角傾斜顯示
},看圖說話
2.對於一根線顯示多個數據這種就用
tooltip 的
formatter函數解決
 formatter: function (params) {
// console.log(params,‘-***********-*------‘)
這個打印出來的就只有一個,直接【0】。屬性就行了,相當於你hover顯示的那一條數據
return `<div>${params[0].data.date_time}</div><span style="width: 5px;height: 5px;border-radius:50%;margin-right: 5px;display: inline-block"></span><span>發文收益:</span><span>${params[0].data.post_earning}</span>
<div><span style="width: 5px;height: 5px;border-radius:50%;margin-right: 5px;display: inline-block"></span><span>廣告收益:</span><span>${params[0].data.advertising_earning}</span></div>
<div><span style="width: 5px;height: 5px;border-radius:50%;margin-right: 5px;display: inline-block"></span><span>打賞收益:</span><span>${params[0].data.give_award_earning}</span></div>
<div><span style="width: 5px;height: 5px;border-radius:50%;margin-right: 5px;display: inline-block"></span><span>額外獎勵:</span><span>${params[0].data.extra_earning}</span></div>
`
}
後臺返回數據的話都是數組對象模式,X軸的話就循環,series裏面的數據的話 也是循環 用forEach循環,就可以了

技術分享圖片


echarts相關