uniapp が参照する echart が表示されない場合はどうすればよいですか?

uniapp を使用してアプリケーションを開発しており、データ視覚化表示のために echarts を参照したいが、いくら頑張っても echarts チャートを正常に表示できない場合は、次のデバッグ手順を実行する必要がある場合があります。 :

1. echarts が正しくインポートされているか確認

echarts を使用する前に、まず echarts の js ファイルをインポートする必要があります。次のコードをindex.htmlに追加して、これを導入してみることができます:

<script></script>

プロジェクトがCDNを使用していない場合は、echartsのjsファイルをダウンロードしてプロジェクトに導入する必要があります。 echarts.js ファイルへのパスが正しいことを確認し、echarts.js が echarts オブジェクトをエクスポートするかどうかも確認してください。

2. コンテナが設定されているかどうかを確認する

uniapp では、提供されているコンポーネントを使用して、echart を配置するコンテナを作成できます。 echarts を使用する前に、コンテナーを定義する必要があります。

以下は例です。

<template>
  <view>
    <ec-canvas></ec-canvas>
  </view>
</template>

このうち、<ec-canvas></ec-canvas> は、グラフを配置するための uniapp の組み込みコンポーネントです。コンポーネント内で ID を指定する必要があります。これは後続の初期化操作に使用されます。

3. echarts の初期化

コンテナを作成した後、js コードで echarts を初期化する必要があります。データと構成項目は初期化コードで指定する必要があり、グラフは以前に定義されたコンテナーでレンダリングされます。

次は例です:

import * as echarts from 'echarts';

export default {
  onLoad() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const ec = this.$refs['chart-dom'].ref;
        const chart = echarts.init(ec, null, {
            width: this.getDomWidth('chart'),
            height: this.getDomHeight('chart')
        });
        let option = {
          title: {
            text: '统计图表'
          },
          ... // 其他配置项
        };
        chart.setOption(option);
      });
    }
  }
}

この例では、uniapp の $nextTick 関数を使用して、chart-dom 要素がレンダリングされた後に echart の初期化が実行されるようにします。チャート - dom 要素のメソッドは this.$refs['chart-dom'].ref です。他のメソッドを使用して初期化用の DOM 要素を取得することもできます。

4. データが正しいか確認します

これまでの手順に問題がないにもかかわらず、echarts グラフが正常に表示されない場合は、次のことが考えられます。データに問題があります。データが正しいかどうか、特定のレンダリングデータが一致するかどうかを確認する必要があります。

要約すると、uniapp で参照されている echart が表示されないという問題が発生した場合は、まず上記の点に焦点を当ててトラブルシューティングを行うことができます。

以上がuniapp が参照する echart が表示されない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。