uniappでechartsコンポーネントをループする方法

近年、モバイルアプリケーションやネットワークアプリケーションの急速な発展に伴い、フロントエンド技術も継続的に更新されており、クロスプラットフォームで効率的で美しいモバイルアプリケーションを簡単に構築できるフレームワークがいくつか登場しています。その中でも、uniapp は非常に尊敬されているフレームワークの 1 つです。 uniapp では、echarts コンポーネントはフロントエンド開発で広く使用されているデータ視覚化ツールです。しかし、初心者にとって、echarts コンポーネントをどのようにループさせるかは難しい問題です。以下、本記事ではuniapp Loop echartsコンポーネントの実装方法をコンポーネント、スロット、データ処理など様々な側面から紹介していきます。

1. コンポーネントの使用法

uniapp では、公式 Web サイトから提供される <ec-canvas> タグを通じて echarts コンポーネントを導入できます。コンポーネントの基本的な使用方法は次のとおりです。

<template>
  <view class="container">
    <ec-canvas ref="mychart" canvas-id="mychart-canvas" :ec="ec" ></ec-canvas>
  </view>
</template>

<script>
  import * as echarts from '../../deps/echarts';

  export default {
    data() {
      return {
        ec: {
          onInit: initChart
        }
      }
    },
    methods: {
      initChart(canvas, width, height, dpr) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        chart.setOption(this.getOption());
        return chart;
      },
      getOption() {
        return {
          /* option for echarts */
          series: [{
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        }
      }
    }
  }
</script>

上記のコードを通じて、uniapp に echarts コンポーネントを導入し、<ec-canvas> タグを使用していくつかの要素を指定できます。 echart の属性。ただし、複数の echarts コンポーネントをページ上でループして表示する場合は、メソッドを変更する必要があります。

2. スロットの使用

echarts コンポーネントの循環表示を実現するために、uniapp が提供するスロットを使用できます。具体的な方法は次のとおりです:

<template>
  <view class="container">
    <view v-for="(item, index) in chartList" :key="index">
      <ec-canvas ref="mychart" :canvas-id="&#39;mychart-canvas&#39; + index" :ec="ec" @canvasInit="initChart(index)"></ec-canvas>
    </view>
  </view>
</template>

<script>
  import * as echarts from '../../deps/echarts';

  export default {
    data() {
      return {
        chartList: [1, 2, 3, 4, 5],
        ec: {},
        myChartList: []
      }
    },
    methods: {
      initChart(index) {
        const that = this
        return (canvas, width, height) => {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          that.myChartList.push(chart)
          chart.setOption(that.getOption(index));
          return chart
        };
      },
      getOption(index) {
        return {
          /* option for echarts */
          series: [{
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }],
          color: function(params){    
             let colorList = ['#f00', '#0f0', '#00f','#f0f','#0ff','#ff0']
             return colorList[params.dataIndex]
          } 
        }
      }
    }
  }
</script>

上記のサンプル コードでは、v-for を使用して chartList をループします。 <ec-canvas> タグの canvas-id 属性は、複数の echarts コンポーネントを区別するために異なる値を指定します。同時に、@canvasInit を使用してイベントをリッスンし、各 <ec-canvas> タグが初期化されたときに initChart メソッドを実行し、初期化されたグラフを ## に保存しました。 #.myChartList 真ん中。

3. データの処理

複数の echarts チャートに異なるデータを表示するには、データを処理して getOption メソッドに渡し、各チャートの異なるデータを設定する必要があります。パラメータを渡すことでこの目標を達成できます。

<template>
  <view class="container">
    <view v-for="(item, index) in chartList" :key="index">
      <ec-canvas ref="mychart" :canvas-id="&#39;mychart-canvas&#39; + index" :ec="ec" @canvasInit="initChart(index)"></ec-canvas>
    </view>
  </view>
</template>

<script>
  import * as echarts from '../../deps/echarts';

  export default {
    data() {
      return {
        chartList: [1, 2, 3, 4, 5],
        ec: {},
        myChartList: []
      }
    },
    methods: {
      initChart(index) {
        const that = this
        return (canvas, width, height) => {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          that.myChartList.push(chart)
          chart.setOption(that.getOption(index));
          return chart
        };
      },
      getOption(index) {
        return {
          /* option for echarts */
          series: [{
            type: 'bar',
            data: this.chartList.map((c, i) => index == i ? c * 3 : c)
          }],
          color: function(params){    
             let colorList = ['#f00', '#0f0', '#00f','#f0f','#0ff','#ff0']
             return colorList[params.dataIndex]
          } 
        }
      }
    }
  }
</script>

上記のコード例では、データ処理時に

map() メソッドを使用し、パラメータ index がパラメータの添字と同じかどうかを確認します。ループによって走査されるデータ ##iEqual、等しい場合はデータ c を 3 で乗算し、それ以外の場合は元の値 c を返します。 上記の手順により、uniapp で echarts コンポーネントを周期的に表示するという目標を正常に達成できます。最後に、コンポーネントの使用法、スロット、データ処理など、習得する必要がある知識ポイントをまとめます。これらのスキルを熟達し、継続的に実践してこそ、優秀なフロントエンドエンジニアになれるのです。

以上がuniappでechartsコンポーネントをループする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。