Carta ECharts Sankey Rose: Bagaimana untuk memaparkan aliran dan perkadaran data

Carta ECharts Sankey Rose: Cara memaparkan aliran dan perkadaran data memerlukan contoh kod khusus

Dengan kemunculan era data besar, analisis dan visualisasi data telah menjadi alat penting. Sebagai perpustakaan visualisasi yang berkuasa, ECharts menyediakan pelbagai jenis carta, salah satunya ialah carta Sankey Rose. Gambar rajah Sankey Rose sesuai untuk memaparkan aliran data dan hubungan perkadaran dalam pelbagai dimensi. Artikel ini akan memperkenalkan konsep asas dan penggunaan Carta Sankey Rose, dan memberikan contoh kod khusus.

1. Konsep asas Carta Sankey Rose
   Carta Mawar Sankey ialah jenis carta radar khas, yang menggunakan jejari yang berbeza panjang untuk mewakili nilai dan sudut yang berbeza untuk mewakili dimensi yang berbeza. Jejari graf mewakili jumlah data, manakala sudut setiap dimensi mewakili kategori data. Dengan menyambungkan dimensi yang berbeza, kami boleh menunjukkan aliran dan perkadaran perhubungan antara data.
2. Contoh kod Carta Sankey Rose
   Berikut ialah contoh kod Carta Sankey Rose yang mudah:

// 引入ECharts
var echarts = require('echarts');

// 初始化图表
var myChart = echarts.init(document.getElementById('chart'));

// 数据示例
var data = [
  { source: 'A', target: 'B', value: 100 },
  { source: 'A', target: 'C', value: 200 },
  { source: 'B', target: 'C', value: 150 },
];

// 将数据格式转换为桑基玫瑰图需要的格式
var seriesData = data.map(item => {
  return {
    name: item.source,
    type: 'sankey',
    data: [
      { name: item.source },
      { name: item.target },
    ],
    links: [
      { source: item.source, target: item.target, value: item.value },
    ],
  };
});

// 配置项
var option = {
  tooltip: {},
  series: seriesData,
};

// 渲染图表
myChart.setOption(option);

Dalam kod di atas, kami mula-mula memperkenalkan perpustakaan ECharts dan memulakan contoh carta. Kemudian contoh data mudah ditakrifkan, termasuk tiga nod dan dua perhubungan. Seterusnya, kami menukar data ke dalam format yang diperlukan oleh gambar rajah mawar Sankey, di mana atribut nama nod mewakili nama nod, dan atribut pautan mewakili hubungan antara nod.

Akhir sekali, kami menentukan beberapa gaya dan gelagat interaktif melalui item konfigurasi dan menghantar data ke dalam contoh carta untuk pemaparan. Pada halaman, kedudukan carta boleh ditentukan oleh id elemen div.

3. Senario penggunaan Carta Sankey Rose
   Carta Mawar Sankey sesuai untuk menunjukkan arah aliran data dan hubungan perkadaran antara pelbagai dimensi. Ia digunakan secara meluas dalam banyak bidang, seperti:

• Bidang perdagangan: menunjukkan aliran dan perkadaran barangan antara negara yang berbeza
• Analisis lawatan tapak web: menunjukkan aliran dan perkadaran lompatan antara halaman yang berbeza
• Bidang kewangan : Menunjukkan aliran transaksi dan perkadaran antara kelas aset yang berbeza.

Melalui Carta Sankey Rose, kami boleh memahami secara intuitif hubungan antara data dan membantu kami membuat keputusan yang lebih baik.

Ringkasan:
Artikel ini memperkenalkan konsep asas dan penggunaan Carta ECharts Sankey Rose, dan memberikan contoh kod khusus. Gambar rajah Sankey Rose sesuai untuk menunjukkan arah aliran data dan hubungan perkadaran, dan mewakili kuantiti dan dimensi data melalui jejari dan sudut yang berbeza panjang. Menggunakan perpustakaan ECharts, kami boleh melaksanakan Carta Sankey Rose dengan mudah dan menggunakannya dalam senario aplikasi yang berbeza. Saya harap artikel ini membantu anda memahami dan menggunakan Carta Sankey Rose.

Atas ialah kandungan terperinci Carta ECharts Sankey Rose: Bagaimana untuk memaparkan aliran dan perkadaran data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!