Rumah >hujung hadapan web >tutorial js >Carta Corong ECharts: Cara Menunjukkan Perubahan Corong Data
Carta Corong ECharts: Cara Menunjukkan Perubahan Corong Data
- WBOYasal
- 2023-12-18 14:13:42987semak imbas
Carta Corong ECharts: Cara memaparkan perubahan corong data memerlukan contoh kod khusus
- Pengenalan
Carta corong ialah kaedah visualisasi data yang biasa digunakan yang boleh digunakan untuk memaparkan perubahan proses atau analisis peringkat data. ECharts ialah perpustakaan visualisasi data JavaScript sumber terbuka yang boleh digunakan untuk mencipta pelbagai carta interaktif. Artikel ini akan memperkenalkan cara menggunakan ECharts untuk memaparkan perubahan corong dalam data dan memberikan contoh kod khusus. - Konsep asas carta corong ECharts
Carta corong ialah jenis carta khas yang digunakan untuk mewakili bentuk corong data. Biasanya, lebar bawah carta corong mewakili data permulaan, lebar atas mewakili data akhir dan lebar setiap peringkat di antaranya mewakili data perantaraan. Carta corong boleh memaparkan dengan tepat proses perubahan data, membolehkan penonton memahami pertumbuhan atau penurunan data secara intuitif. - Langkah-langkah menggunakan carta corong ECharts
Mencipta carta corong menggunakan ECharts secara amnya boleh dibahagikan kepada langkah berikut:
3.1 Sediakan data
Pertama, anda perlu menyediakan data yang perlu dipaparkan. Data setiap peringkat hendaklah mengandungi dua atribut iaitu nama peringkat dan nilai peringkat. Sebagai contoh, kita boleh mempunyai data berikut:
var data = [
{ name: '访问', value: 100 },
{ name: '浏览', value: 80 },
{ name: '点击', value: 60 },
{ name: '转化', value: 40 },
{ name: '下单', value: 20 },
{ name: '支付', value: 10 }
];3.2 Buat contoh carta
Seterusnya, anda perlu mencipta tika carta ECharts. Contoh carta corong asas boleh dibuat dengan kod berikut:
var myChart = echarts.init(document.getElementById('chart')); Di sini 'carta' ialah id elemen HTML yang digunakan untuk menampung carta ECharts. 'chart'是一个HTML元素的id，用于容纳ECharts图表。
3.3 配置漏斗图
ECharts提供了丰富的配置选项，可以用来自定义漏斗图的样式。以下是一个基本的漏斗图配置示例：
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name: '漏斗图',
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
emphasis: {
label: {
show: true,
fontSize: 20
}
},
data: data
}
]
};在上述配置中，我们可以设置tooltip的内容和格式，设置漏斗图的位置和大小，设置数据的排序方式和标签显示方式等。
3.4 渲染图表
最后，将配置应用到图表实例中，并使用setOption
- ECharts menyediakan pelbagai pilihan konfigurasi yang boleh digunakan untuk menyesuaikan gaya carta corong. Berikut ialah contoh konfigurasi carta corong asas:
myChart.setOption(option);
Dalam konfigurasi di atas, kita boleh menetapkan kandungan dan format petua alat, menetapkan kedudukan dan saiz carta corong, menetapkan kaedah pengisihan data dan kaedah paparan label, dsb.
Akhir sekali, gunakan konfigurasi pada contoh carta dan gunakan kaedah setOption untuk membuat:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 漏斗图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
var data = [
{ name: '访问', value: 100 },
{ name: '浏览', value: 80 },
{ name: '点击', value: 60 },
{ name: '转化', value: 40 },
{ name: '下单', value: 20 },
{ name: '支付', value: 10 }
];
var myChart = echarts.init(document.getElementById('chart'));
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name: '漏斗图',
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
emphasis: {
label: {
show: true,
fontSize: 20
}
},
data: data
}
]
};
myChart.setOption(option);
</script>
</body>
</html>- Contoh kod penuh
Berikut ialah kod lengkap untuk mencipta carta corong menggunakan Contoh ECharts:
Atas ialah kandungan terperinci Carta Corong ECharts: Cara Menunjukkan Perubahan Corong Data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!