Bagaimana untuk menggelungkan komponen echarts dalam uniapp

Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat aplikasi mudah alih dan aplikasi rangkaian, teknologi bahagian hadapan telah dikemas kini secara berterusan, dan beberapa rangka kerja telah muncul yang boleh membina aplikasi mudah alih merentas platform, cekap dan cantik dengan mudah. Antaranya, uniapp adalah salah satu rangka kerja yang sangat dihormati. Dalam uniapp, komponen echarts ialah alat visualisasi data yang digunakan secara meluas dalam pembangunan bahagian hadapan. Walau bagaimanapun, bagi pemula, cara menggelungkan komponen echarts adalah masalah yang sukar. Di bawah, artikel ini akan memperkenalkan kaedah pelaksanaan komponen uniapp loop echarts dari pelbagai aspek seperti komponen, slot dan pemprosesan data.

1. Penggunaan komponen

Dalam uniapp, kami boleh memperkenalkan komponen echarts melalui tag <ec-canvas> yang disediakan oleh tapak web rasmi. Kaedah asas menggunakan komponen adalah seperti berikut:

<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>

Melalui kod di atas, kita boleh memperkenalkan komponen echarts dalam uniapp dan menggunakan tag <ec-canvas> untuk menentukan beberapa atribut echarts. Walau bagaimanapun, jika anda ingin memaparkan berbilang komponen echarts dalam satu gelung pada halaman, anda perlu menukar kaedah tersebut.

2. Gunakan slot

Untuk merealisasikan paparan kitaran komponen echarts, kami boleh menggunakan slot yang disediakan oleh uniapp. Kaedah khusus adalah seperti berikut:

<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>

Dalam kod contoh di atas, kami menggunakan v-for untuk menggelung melalui chartList Semasa traversal, kami boleh menambah <ec-canvas> . >Atribut menentukan nilai yang berbeza untuk membezakan berbilang komponen echart. Pada masa yang sama, kami menggunakan canvas-id untuk mendengar acara, melaksanakan kaedah initChart apabila setiap teg @canvasInit dimulakan dan menyimpan carta yang dimulakan dalam <ec-canvas>. .myChartList

3. Memproses data

Untuk membuat berbilang carta echarts memaparkan data yang berbeza, kami perlu memproses data dan menghantarnya ke kaedah getOption untuk mengkonfigurasi data yang berbeza bagi setiap carta. Kita boleh mencapai matlamat ini dengan melepasi parameter.

<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>

Dalam kod contoh di atas, kami menggunakan kaedah

semasa memproses data dan menyemak sama ada parameter map() adalah sama dengan subskrip index data yang dilalui oleh gelung, dan jika ya, Data i didarab dengan 3, jika tidak, nilai asal c dikembalikan. c

Melalui langkah di atas, kami boleh mencapai matlamat untuk memaparkan komponen echarts secara kitaran dalam uniapp. Akhir sekali, ringkaskan mata pengetahuan yang perlu dikuasai: penggunaan komponen, slot dan pemprosesan data. Hanya dengan menguasai kemahiran ini secara mahir dan mengamalkannya secara berterusan dalam amalan anda boleh menjadi seorang jurutera hadapan yang cemerlang.

Atas ialah kandungan terperinci Bagaimana untuk menggelungkan komponen echarts dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!