-
レイアウトが小さすぎる場合があります。echart を使用すると、X 軸と Y 軸のテキストがブロックされやすくなります。この問題を解決する方法、またはコンテナー全体をカバーできません。
方法1：直接設定する containLabel 字段
options: {
grid: {
containLabel:true,
},}
方法 2: 間接的な設定ですが、あまり正確ではないため、アダプティブ ページで問題が発生します。
options: {
grid: {
left:'1%',
right:'1%',
bottom:'10%',
},}
方法 3: 4 方向を同時に調整する。グリッド{}と表示値ラベルは同時に設定されます。 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
},
}問題 2: 現在のデータ値の桁数が多い場合、グラフもずれる原因になります。
解決する：
この問題の解決策:
方法 5: 方法 4 と組み合わせて動的に調整します。
Grid{}、 containLabel 値ラベルの長さの動的判断、動的調整を追加します。左側のデータの長さを決定し、左側の位置を微調整します。ウォッチを追加して API リクエストによって返されたデータを観察し、左右のデータ値の長さを決定しますか?
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)
}
}
}実行結果
値は 0 です。
値の長さが 5 桁を超えています
