uni-app H5 はタブバーを使用して切り替えを行うため、echartst チャートが小さくなり、幅が 100px しかなくなりました。

 質問：

他のタブバーのページにジャンプして戻ってくると、echarts の画像には小さな団子が縮小した状態が表示されます。

原因分析:

タブ切り替えにechartがある場合、初期化されたechartには幅があることが分かりますが、タブをクリックして切り替えると、切り替えられたechartの幅は100pxしかありません。
これはレンダリングのタイミングが間違っているためで、ページの初期化時にすべてのタブで echart を実行するのではなく、現在のスイッチをクリックして echart の親が読み込まれてから echart を実行する必要があります。
echarts は親に応じて幅を与えるため、ページの初期化時に他のタブが display:none に切り替わり、幅がないため、上記の問題が発生します。

解決する：

タブバーがジャンプした後、echart を削除し、ジャンプして戻った後に再描画します。v-if を使用して解決する

 追加: v-if="チャート"

 タブバーのクリック イベント: onTabItemTap、クリックして戻ると、チャートを設定: true、

ページが離れると、onHide: chart=false になります。

<view class="seven">
      <view class="chart-title">近7天洗涤费趋势</view>
      <view class="charts-box" v-if="chart">
        <qiun-data-charts
            type="column"
            :eopts="eopts"
            :chartData="chartData"
            :echartsH5="true"
            :resize="echartsResize"
            padding="0"
            margin="0"/>
      </view>
    </view>

//..
data(){
return {
 chart: false,
}
}

  onHide() {
    console.log(">>页面不见了")
    this.chart = false;
  },
  onShow() {
    console.log(">>>2. onShow，tabs每次跳转触发 ")
    this.chart = true
  },

  methods: {
    onTabItemTap(item) {
      console.log(">>|------------点击事件", item)
    },
}