Rumah > Artikel > hujung hadapan web > Carta Corong ECharts: Cara Menunjukkan Aliran Data
Carta Corong ECharts: Cara Menunjukkan Aliran Data
- WBOYasal
- 2023-12-18 14:37:06919semak imbas
Carta Corong ECharts: Bagaimana untuk menunjukkan proses data, contoh kod khusus diperlukan
- Pengenalan
Dengan kemunculan era data besar, analisis data dan visualisasi data menjadi semakin penting. Dalam proses analisis data, sangat penting untuk memahami proses dan transformasi data. ECharts ialah perpustakaan visualisasi data yang berkuasa yang boleh membantu kami memaparkan proses data secara visual. Artikel ini akan menumpukan pada Carta Corong dalam ECharts dan menunjukkan cara menggunakan ECharts untuk memaparkan aliran data.
- Ciri-ciri carta corong
Carta corong ialah carta bar khas yang menggunakan grafik berbentuk corong untuk memaparkan aliran dan transformasi data. Ciri-ciri carta corong adalah seperti berikut:
- Ia sesuai untuk memaparkan proses data berperingkat, seperti proses penukaran dalam saluran jualan, tingkah laku pengguna dalam log akses laman web, dsb.
- Data secara beransur-ansur berkurangan dari atas ke bawah, membentuk bentuk corong, yang secara intuitif boleh mencerminkan perubahan dalam kadar penukaran.
- Anda boleh menggunakan blok corong warna yang berbeza untuk mewakili peringkat yang berbeza untuk meningkatkan kebolehbacaan.
- Gunakan ECharts untuk melukis carta corong
Di bawah ini kami menggunakan ECharts untuk melukis contoh carta corong yang mudah. Katakan kita mempunyai data pada saluran jualan dengan tiga langkah: jumlah lawatan, penambahan troli beli-belah dan pembelian yang berjaya.
Pertama, kita perlu memperkenalkan fail perpustakaan ECharts ke dalam HTML dan mencipta bekas DIV dengan lebar dan ketinggian tertentu untuk memaparkan carta.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts漏斗图示例</title>
<!-- 引入ECharts库文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个具备一定宽度和高度的DIV容器 -->
<div id="funnelChart" style="width: 600px; height: 400px;"></div>
</body>
</html>Seterusnya, gunakan API ECharts dalam JavaScript untuk melukis carta corong.
// 使用ECharts的API绘制漏斗图
var chartDom = document.getElementById('funnelChart');
var myChart = echarts.init(chartDom);
var option;
// 指定漏斗图的配置项和数据
option = {
title: {
text: '销售渠道转化漏斗图',
subtext: '示例数据'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['总访问量', '添加购物车量', '成功购买量']
},
series: [
{
name: '转化率',
type: 'funnel',
left: '10%',
top: 60,
// 指定各个阶段的具体数值
data: [
{value: 1000, name: '总访问量'},
{value: 800, name: '添加购物车量'},
{value: 500, name: '成功购买量'}
],
// 设置漏斗图的属性
itemStyle: {
borderWidth: 1,
borderColor: '#fff'
},
// 指定漏斗图的标签样式
label: {
position: 'inside',
formatter: '{c}'
}
}
]
};
// 使用刚指定的配置项和数据显示图表
option && myChart.setOption(option);Dalam kod di atas, kami menggunakan API ECharts untuk mencipta carta corong, menyatakan nilai dan label yang sepadan untuk setiap peringkat. Dengan menetapkan sifat dan gaya label carta corong, kita boleh mendapatkan visualisasi carta corong yang lebih baik. Akhir sekali, gunakan kaedah setOption untuk menggunakan item konfigurasi dan data pada carta untuk memaparkan carta.
- Ringkasan
ECharts ialah perpustakaan visualisasi data yang berkuasa yang boleh membantu kami memaparkan proses dan transformasi data secara visual. Artikel ini memfokuskan pada ciri carta corong dalam ECharts, cara melukis carta corong dan menyediakan contoh kod khusus. Melalui pembelajaran dan amalan, kami boleh menggunakan ECharts dengan lebih baik untuk memaparkan proses data semasa proses analisis data dan meningkatkan kecekapan dan ketepatan analisis data.
(Nota: Contoh kod di atas menggunakan ECharts versi 4.9.0. Jika anda perlu menggunakan versi lain, anda boleh melaraskannya mengikut situasi sebenar.)
Atas ialah kandungan terperinci Carta Corong ECharts: Cara Menunjukkan Aliran Data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!