Cara menggunakan Layui untuk melaksanakan fungsi paparan carta berskala

Cara menggunakan Layui untuk melaksanakan fungsi paparan carta berskala

Layui ialah rangka kerja UI bahagian hadapan yang ringan yang menyediakan komponen yang kaya dan gaya yang kaya, dan sangat sesuai untuk membina antara muka web. Dalam bidang visualisasi data, carta adalah salah satu kaedah persembahan yang paling biasa digunakan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Layui dan echarts untuk melaksanakan halaman paparan carta dengan fungsi berskala.

Pertama, kami perlu memperkenalkan fail sumber berkaitan Layui dan echarts. Ia boleh diperkenalkan melalui CDN, atau fail boleh dimuat turun secara tempatan dan dirujuk.

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>

Seterusnya, kita perlu mencipta kawasan paparan carta dengan fungsi zum. Dalam HTML, kita boleh melakukan ini menggunakan bekas dengan lebar dan ketinggian tetap.

<div class="chart-container" id="chart"></div>

Kemudian, dalam JavaScript, kita perlu memulakan contoh echarts dan mengaitkannya dengan elemen Layui.

layui.use(['element'], function () {
  var element = layui.element;
  var chart = document.getElementById('chart');
  var myChart = echarts.init(chart);
  
  // 此处省略数据处理与配置项的代码
  
  // 绑定图表大小的自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
});

Seterusnya, kita perlu memproses data dan item konfigurasi carta. Demi kesederhanaan di sini, kami terus menggunakan set data yang dijana secara rawak. Dalam aplikasi praktikal, anda perlu menjana data mengikut keperluan anda sendiri dan memprosesnya dengan sewajarnya.

var data = [];
for (var i = 0; i < 20; i++) {
  data.push(Math.random() * 100);
}

var option = {
  xAxis: {
    type: 'category',
    data: data
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: data,
    type: 'line'
  }]
};

myChart.setOption(option);

Akhir sekali, kita perlu menambah beberapa gaya pada kawasan carta untuk mendayakan fungsi zum.

.chart-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  resize: both;
  cursor: nwse-resize;
}

Dengan menetapkan sifat lebar, ketinggian dan limpahan bekas, kami boleh mengehadkan saiz carta dan melaksanakan fungsi bar skrol. Dengan menetapkan atribut ubah saiz dan atribut kursor, kami boleh membenarkan pengguna mengubah saiz carta.

Pada ketika ini, kami telah melengkapkan halaman paparan carta dengan fungsi zum. Pengguna boleh menukar saiz carta dengan menyeretnya menggunakan tetikus untuk menyesuaikan diri dengan saiz skrin yang berbeza. Dengan menggunakan Layui dan echarts, kami boleh melaksanakan halaman paparan carta yang kaya dengan ciri sedemikian dengan mudah.

Ringkasan: Artikel ini memperkenalkan cara menggunakan Layui dan echarts untuk melaksanakan halaman paparan carta dengan fungsi boleh skala. Dengan memperkenalkan fail sumber yang berkaitan, mencipta bekas carta, memulakan contoh echarts, memproses data dan item konfigurasi, dan menambahkan gaya pada kawasan carta, kami boleh melaksanakan halaman paparan carta yang kaya dengan ciri. Harap ini membantu!

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi paparan carta berskala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!