Carta Corong ECharts: Cara Memaparkan Kadar Penukaran Data

Carta Corong ECharts: Bagaimana untuk memaparkan kadar penukaran data, contoh kod khusus diperlukan

Pengenalan:
Dalam bidang visualisasi data, carta corong ialah jenis carta yang sangat biasa digunakan, yang boleh memaparkan secara visual proses transformasi dan transformasi Kadar data. Sebagai alat visualisasi data yang berkuasa, ECharts juga menyediakan fungsi lukisan carta corong. Artikel ini akan menggabungkan contoh kod khusus untuk memperkenalkan secara terperinci kaedah lukisan carta corong ECharts dan cara memaparkan kadar penukaran data.

1. Struktur asas carta corong
   Carta corong membentangkan peringkat yang berbeza dari atas ke bawah, dan setiap peringkat sepadan dengan jumlah data tertentu. Peringkat ini beransur-ansur mengecut, membentuk bentuk corong. Dalam ECharts, carta corong boleh ditentukan melalui atribut jenis dalam siri.
2. Lukis carta corong asas
   Pertama, kita perlu memperkenalkan fail perpustakaan ECharts dan memulakan contoh carta. Berikut ialah contoh kod untuk melukis carta corong asas:

<!--引入ECharts的库文件-->
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>

<!--在HTML中创建一个DOM容器，用于存放图表-->
<div id="funnelChart" style="width: 600px; height: 400px;"></div>

<script>
  //实例化一个图表实例
  let myChart = echarts.init(document.getElementById('funnelChart'));

  //配置图表的基本信息
  let option = {
      title: {
          text: '漏斗图示例',
      },
      series: [{
          type: 'funnel',
          data: [
              {value: 60, name: '浏览量'},
              {value: 40, name: '点击量'},
              {value: 20, name: '购买量'},
              {value: 10, name: '转化率'}
          ]
      }]
  };

  //使用配置项显示图表
  myChart.setOption(option);
</script>

3. Tunjukkan kadar penukaran data
   Untuk menunjukkan kadar penukaran data, kami boleh menambah label label pada setiap peringkat carta corong dan menyesuaikan label melalui atribut pemformat Paparan kandungan. Berikut ialah contoh kod yang menunjukkan kadar penukaran data:

let option = {
    title: {
        text: '漏斗图示例',
    },
    series: [{
        type: 'funnel',
        data: [
            {value: 60, name: '浏览量'},
            {value: 40, name: '点击量'},
            {value: 20, name: '购买量'},
            {value: 10, name: '转化率'}
        ],
        label: {
            formatter: '{b}：{c}%'
        }
    }]
};

Dengan menetapkan atribut pemformat label kepada '{b}:{c}%', kita boleh menukar nama (nama) dan nilai berangka (nilai) bagi data serta tanda peratus (%) dipaparkan bersama dalam label setiap peringkat. Contohnya, 'Amaun Belian: 20%'.

Ringkasan:
Dalam ECharts, kita boleh melukis carta corong melalui konfigurasi mudah dan memaparkan kadar penukaran data. Dengan menetapkan atribut pemformat label label, kami boleh menyesuaikan kandungan paparan label. Saya berharap melalui pengenalan artikel ini, pembaca dapat memahami kaedah lukisan asas carta corong ECharts dan menggunakannya secara fleksibel dalam aplikasi praktikal.

Atas ialah kandungan terperinci Carta Corong ECharts: Cara Memaparkan Kadar Penukaran Data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!