做網(wǎng)站的榮譽證書推廣運營公司哪家好
-
有時候布局太小，使用echarts，x軸y軸文字容易被遮擋，怎么解決這個問題呢，或者是未能鋪滿整個容器。
方法1： 直接設置?containLabel?字段
options:?{
????grid:?{
????? ?containLabel:?true,
????},}
?方法2:??間接設置，但是不那么準確，自適應的頁面會有問題
options:?{
????grid:?{
?????????left:?'1%',
?????????right:?'1%',
?????????bottom:?'10%',?
????},}
方法3：同時調(diào)整4個方向?grid{} 與顯示數(shù)值label同時配置?containLabel?
<template><view class="seven"><view class="chart-title">趨勢</view><view class="charts-box" v-if="chart"><qiun-data-chartstype="column":eopts="eopts":chartData="chartData":echartsH5="true"padding="0"margin="0"/></view></view>
</template>
//...eopts:{grid: {top: '8%',left: '-10%',right: '0%',bottom: '5%',containLabel: true},
}問題二：當前數(shù)據(jù)值比較多位時，也會導致圖表偏移。
解決：
此問題解法：
方法5：與方法4結(jié)合，再動態(tài)調(diào)整。
grid{},?containLabel?，再加動態(tài)判斷數(shù)值label長度，動態(tài)調(diào)整。判斷是左的數(shù)據(jù)長度了微調(diào)left的位置。增加watch觀察api請求回來的數(shù)據(jù)，然后判斷最左右數(shù)據(jù)值長度是多少？
todayCount(newValue) {console.log(">>|------------- todayCount", this.todayCount.money7)if (this.todayCount.money7) {let len = this.todayCount.money7[1].toString().lengthconsole.log(`-[${this.todayCount.money7[1].toString()}]`, len)// 1if (len < 2) {this.eopts.grid.left = '-10%'} else if (len >= 2 && len <= 5) {this.eopts.grid.left = '-10%'} else {this.eopts.grid.left = '-13%'}console.log(">>|-----------eopts", this.todayCount.money7, this.eopts.grid)}}}運行效果
數(shù)值為0：
數(shù)值長度為5位以上
