關於echarts的南丁格爾玫瑰圖 極值導致展示效果不好的解決方案


思路:找出最大值除以2取整,所有項的數據加上這個值,也就是變相的放大所有值,然后再鼠標懸浮的效果tooltip里面的formatter將值再還原做相應處理

 // 由於南丁格爾圖存在極值導致太小問題  先放大極值 然后再進行還原即可
            var pieData= data  //data為接口請求回來的值
            var sumNumber=0
            pieData.forEach(item => {
                sumNumber += item.value;
                if(item.value >= this.max) this.max = item.value;//記錄一個最大值
            });
            // 放大規則
            let number_sure = Math.round(this.max * 0.5);
            this.showData = pieData.map(item => {
                return {
                    value: number_sure + item.value,
                    name: item.name
                }
            })
  tooltip: {
                    trigger: 'item',
                    formatter: function (param){ //還原正常值
                       return param.name +': '+ (param.value - number_sure) + ' ' + (((param.value - number_sure) / sumNumber) * 100).toFixed(2) + '%'
                    }
                },
data: this.showData

方法二:后來仔細查看文檔發現 有這樣的一個屬性  直接設置就可以了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM