echarts中月份数据缺少怎么补齐呢?
生活随笔
收集整理的這篇文章主要介紹了
echarts中月份数据缺少怎么补齐呢?
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在寫echarts圖表的折線圖是時(shí)發(fā)現(xiàn)
后端給的數(shù)據(jù)有點(diǎn)問題
在這里插入代碼片 [ { date:"2021-10", num:"2" },{ date:"2021-05", num:"2" }, ] //后端給的這樣的數(shù)據(jù),這種不經(jīng)過處理當(dāng)然沒有辦法顯示在合適的月份所以要對數(shù)據(jù)進(jìn)行處理 //我的想法是先創(chuàng)建一個(gè)數(shù)組12個(gè)數(shù)據(jù)都是0 let data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] //然后將月份當(dāng)做下標(biāo)將月份的數(shù)據(jù)補(bǔ)進(jìn)data中 //arr是要補(bǔ)充的數(shù)組 //item是要補(bǔ)充的內(nèi)容 //index是要補(bǔ)充的位置insert(arr, item, index) {console.log(arr.splice(index, 1), item, index)//如果沒有這一步數(shù)組的長度為12+后端給的那幾條數(shù)據(jù)return arr.slice(0, index).concat(item, arr.slice(index))},//這樣最終返回的數(shù)組長度為12//直接調(diào)用這個(gè)方法data = this.insert(data, item.num, item.formatDate.slice(-2) - 1)//item.formatDate:2021-02或2021-11//判斷最后的兩個(gè)字符串是否是01,02這種的 最后的-1是因?yàn)樵路輳?開始的而下標(biāo)確實(shí)從0開始的if (item.formatDate.slice(-2)[0] == 0) {this.month = this.insert(this.month, item.num, item.formatDate.slice(-2)[1] - 1)} else {this.month = this.insert(this.month, item.num, item.formatDate.slice(-2) - 1)}由于這些數(shù)據(jù)是展示的近12個(gè)月的內(nèi)容所以echarts右側(cè)應(yīng)該顯示當(dāng)前月份
window.addEventListener('resize', () => {//根據(jù)屏幕變化來重新渲染domemyChart.resize()})const xData = (function () {const data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']const today = new Date()const month = today.getMonth()// console.log(data.length)for (let i = 0; i < data.length; i++) {if (i === month) {data.splice(0, data.length, ...data.slice(i + 1, data.length).concat(...data.slice(0, i + 1)))}}return data//比如當(dāng)前為一月份那么返回的data:【'2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月','1月'】}())總結(jié)
以上是生活随笔為你收集整理的echarts中月份数据缺少怎么补齐呢?的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 简单的几句话让你理解”什么是备份、容灾、
- 下一篇: springboot集成canal,实现