-
Sometimes the layout is too small. When using echarts, the x-axis and y-axis text are easily blocked. How to solve this problem, or the entire container cannot be covered.
Method 1: Set directly containLabel 字段
options: {
grid: {
containLabel:true,
},}
Method 2: Indirect setting, but not so accurate, there will be problems with adaptive pages
options: {
grid: {
left:'1%',
right:'1%',
bottom:'10%',
},}
Method 3: Adjust 4 directions at the same time. Grid{} and display value label are configured at the same time. containLabel
<template>
<view class="seven">
<view class="chart-title">趋势</view>
<view class="charts-box" v-if="chart">
<qiun-data-charts
type="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
},
}Problem 2: When the current data value has many digits, it will also cause the chart to shift.
solve:
Solution to this problem:
Method 5: Combine with method 4 and then adjust dynamically.
grid{},, containLabel plus dynamic judgment of the value label length, dynamic adjustment. Determine the length of the left data and fine-tune the position of left. Add a watch to observe the data returned by the API request, and then determine the length of the left and right data value?
todayCount(newValue) {
console.log(">>|------------- todayCount", this.todayCount.money7)
if (this.todayCount.money7) {
let len = this.todayCount.money7[1].toString().length
console.log(`-[${this.todayCount.money7[1].toString()}]`, len)// 1
if (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)
}
}
}running result
The value is 0:
The value length is more than 5 digits
