Rumah >hujung hadapan web >tutorial js >Cara menggunakan Carta Sankey Rose untuk memaparkan aliran data dan perubahan perkadaran dalam ECharts
Cara menggunakan Carta Sankey Rose untuk memaparkan aliran data dan perubahan perkadaran dalam ECharts
- WBOYasal
- 2023-12-18 13:47:45750semak imbas
ECharts ialah perpustakaan paparan data visual yang boleh menjadikan data lebih jelas dan intuitif. Antaranya, carta Sankey Rose boleh memberikan bantuan besar dalam menunjukkan arah aliran data dan perubahan perkadaran. Artikel ini akan memperkenalkan cara menggunakan Carta Sankey Rose dalam ECharts, sambil memberikan contoh kod khusus.
- Pengenalan
Sankey Rose Carta ialah carta mawar khas yang memaparkan data melalui gelang sepusat bulatan dalam dan luar serta panjang sektor Ia mempunyai struktur hierarki yang jelas dan sesuai untuk memaparkan aliran data berbilang dimensi. Dalam ECharts, Carta Mawar Sankey boleh digunakan untuk menunjukkan perkadaran antara dimensi berbeza dan perhubungan antara perkadaran dari semasa ke semasa. Selain itu, untuk situasi di mana jumlah data adalah besar dan terdapat terlalu banyak dimensi, ECharts turut menyokong paparan tatal dan pratonton lakaran kecil untuk memudahkan interaksi visual untuk pengguna.
- Pelaksanaan
Yang berikut akan memperkenalkan cara menggunakan carta mawar Sankey dalam ECharts untuk memaparkan arah aliran data dan perubahan perkadaran, termasuk empat langkah pemula, tetapan data, gaya tetapan dan kesan interaktif.
2.1 Inisialisasi
Inisialisasi melibatkan memperkenalkan fail js ECharts dan mencipta bekas kanvas baharu. Kod khusus adalah seperti berikut:
<!-- 引入ECharts插件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 定义画布容器 --> <div id="sankey-rose" style="width: 800px;height: 600px;"></div>
2.2 Menetapkan data
Menetapkan data melibatkan penentuan nod dan tepi. Nod merujuk kepada atribut khusus dalam data Contohnya, dalam gambar rajah Sankey Rose bagi data jualan, nod boleh menjadi jenis produk atau kawasan jualan merujuk kepada sambungan dan arah aliran antara nod yang berbeza, yang mewakili hubungan logik data. Kod khusus adalah seperti berikut:
// 设置节点
var data = {
nodes: [
{name: 'A'},
{name: 'B'},
{name: 'C'},
{name: 'D'},
{name: 'E'}
],
// 设置边
links: [
{
source: 'A',
target: 'B',
value: 10
},
{
source: 'B',
target: 'C',
value: 20
},
{
source: 'C',
target: 'D',
value: 30
},
{
source: 'D',
target: 'E',
value: 40
}
]
}; Antaranya, nod mengandungi semua nod, setiap nod ialah objek, dan name mewakili nama nod (jenis rentetan) . pautan mengandungi semua tepi, setiap tepi ialah objek, source mewakili nama nod sumber, sasaran mewakili nama nod sasaran, value mewakili nilai data (jenis angka). nodes包含了所有的节点，每个节点是一个对象，name表示节点的名称（字符串类型）。links包含了所有的边，每个边是一个对象，source表示源节点的名称，target表示目标节点的名称，value表示数据的值（数值类型）。
2.3 设置样式
样式是指桑基玫瑰图的整体风格和节点之间的关联。在ECharts中，样式可以通过配置series来实现。具体代码如下：
// 设置样式
var option = {
series: [{
type: 'sankey',
data: data.nodes,
links: data.links,
layoutIterations: 32,
lineStyle: {
color: 'source',
curveness: 0.5
},
label: {
color: '#000',
formatter: '{b}'
}
}]
};其中，type表示图表类型，data和links分别对应前面定义的nodes和links。layoutIterations表示布局迭代次数，值越大表示布局越密集，通常设为32即可。lineStyle表示边的样式，color表示边的颜色，这里设为使用源节点的颜色；curveness表示边的弧度，设为0.5表示为曲线。label表示节点标签的样式，formatter表示节点标签的显示内容，这里设为使用节点的名称。
2.4 交互效果
交互效果指用户在与桑基玫瑰图进行互动时触发的效果和操作。在ECharts中，交互效果可以通过配置toolbox来实现。具体代码如下：
// 设置交互效果
option.toolbox = {
feature: {
dataZoom: {},
restore: {},
saveAsImage: {}
}
};其中，feature是一个包含多种交互型工具的对象。dataZoom表示缩放工具，restore表示还原工具，saveAsImage
- Gaya merujuk kepada gaya keseluruhan gambar rajah Sankey Rose dan perkaitan antara nod. Dalam ECharts, gaya boleh dilaksanakan dengan mengkonfigurasi
siri. Kod khusus adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桑基玫瑰图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="sankey-rose" style="width: 800px;height: 600px;"></div>
<script>
// 初始化
var myChart = echarts.init(document.getElementById('sankey-rose'));
// 设置数据
var data = {
nodes: [
{name: '华东地区'},
{name: '华南地区'},
{name: '华北地区'},
{name: '东北地区'},
{name: '中西部地区'},
{name: '电子产品'},
{name: '家用电器'},
{name: '食品饮料'},
{name: '化妆品'},
{name: '家居生活'}
],
links: [
{
source: '华东地区',
target: '电子产品',
value: 300
},
{
source: '华东地区',
target: '家用电器',
value: 200
},
{
source: '华东地区',
target: '食品饮料',
value: 100
},
{
source: '华南地区',
target: '化妆品',
value: 400
},
{
source: '华南地区',
target: '家居生活',
value: 500
},
{
source: '华北地区',
target: '电子产品',
value: 200
},
{
source: '华北地区',
target: '家用电器',
value: 150
},
{
source: '东北地区',
target: '家用电器',
value: 100
},
{
source: '东北地区',
target: '化妆品',
value: 50
},
{
source: '中西部地区',
target: '电子产品',
value: 120
},
{
source: '中西部地区',
target: '食品饮料',
value: 80
},
{
source: '中西部地区',
target: '家居生活',
value: 200
}
]
};
// 设置样式
var option = {
series: [{
type: 'sankey',
data: data.nodes,
links: data.links,
layoutIterations: 32,
lineStyle: {
color: 'source',
curveness: 0.5
},
label: {
color: '#000',
formatter: '{b}'
}
}]
};
// 设置交互效果
option.toolbox = {
feature: {
dataZoom: {},
restore: {},
saveAsImage: {}
}
};
// 渲染图表
myChart.setOption(option);
</script>
</body>
</html>type mewakili jenis carta, dan data dan links masing-masing sepadan dengan yang ditakrifkan sebelum ini nod dan links. layoutIterations mewakili bilangan lelaran reka letak Semakin besar nilai, semakin padat reka letak itu biasanya ditetapkan kepada 32. lineStyle mewakili gaya tepi, color mewakili warna tepi, di sini ia ditetapkan untuk menggunakan warna nod sumber curveness; > mewakili lengkok tepi, ditetapkan kepada 0.5 diwakili sebagai lengkung. label mewakili gaya label nod, formatter mewakili kandungan paparan label nod, di sini ia ditetapkan untuk menggunakan nama nod. 2.4 Kesan interaktif - Kesan interaktif merujuk kepada kesan dan operasi yang dicetuskan apabila pengguna berinteraksi dengan Carta Sankey Rose. Dalam ECharts, kesan interaktif boleh dicapai dengan mengkonfigurasi
toolbox. Kod khusus adalah seperti berikut: rrreee
feature ialah objek yang mengandungi pelbagai alatan interaktif. dataZoom mewakili alat zum, restore mewakili alat pemulihan dan saveAsImage mewakili alat simpan. Alat ini boleh membantu pengguna menukar, bertanya dan mengeksport data. 🎜Kod penuh🎜🎜🎜Kod akhir ada di bawah. Berikut ialah contoh data jualan, menggunakan carta mawar Sankey untuk menunjukkan perkadaran jualan bagi jenis barangan yang berbeza di wilayah yang berbeza. 🎜rrreee🎜🎜Kesimpulan🎜🎜🎜Di atas ialah keseluruhan proses cara menggunakan carta mawar Sankey untuk memaparkan arah aliran data dan perubahan perkadaran dalam ECharts, termasuk langkah seperti pemulaan, penetapan data, gaya tetapan dan kesan interaktif. Dalam aplikasi sebenar, ia boleh diubah suai dan dikembangkan mengikut keperluan khusus. Saya harap artikel ini dapat membantu anda menguasai penggunaan gambar rajah mawar Sankey dengan lebih baik. 🎜Atas ialah kandungan terperinci Cara menggunakan Carta Sankey Rose untuk memaparkan aliran data dan perubahan perkadaran dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!