Bagaimana untuk menetapkan saiz penyesuaian echarts

Kaedah untuk menetapkan saiz suai echarts termasuk menetapkan saiz bekas mengikut peratusan, mengubah saiz pendengar acara dan pertanyaan media CSS. Pengenalan terperinci: 1. Tetapkan saiz bekas mengikut peratusan, dengan menetapkan lebar dan tinggi bekas carta kepada nilai peratusan 2. Pendengar acara mengubah saiz, dengan mendengar perubahan dalam saiz tetingkap, boleh menetapkan semula lebar dan ketinggian; carta apabila saiz tetingkap berubah ; 3. Pertanyaan media CSS, dengan menentukan peraturan gaya yang berbeza dalam CSS, saiz bekas carta boleh ditetapkan mengikut lebar dan ketinggian skrin.

ECharts ialah perpustakaan visualisasi sumber terbuka berasaskan JavaScript untuk mencipta carta dan graf interaktif dan dinamik. Ia menyediakan jenis carta yang kaya dan pilihan konfigurasi yang fleksibel, membolehkan pembangun mencipta pelbagai jenis visualisasi data dengan mudah.

Keperluan biasa apabila menggunakan ECharts ialah menjadikan carta boleh diubah saiz untuk menampung peranti dan saiz skrin yang berbeza. Berikut akan memperkenalkan beberapa kaedah biasa untuk menetapkan saiz penyesuaian carta ECharts.

1. Tetapkan saiz bekas menggunakan peratusan:

Dengan menetapkan lebar dan tinggi bekas carta kepada nilai peratusan, anda boleh membuat carta menyesuaikan diri dengan saiz bekas induk. Sebagai contoh, anda boleh menetapkan lebar bekas carta kepada "100%" dan ketinggian kepada "100%" supaya carta melaraskan secara automatik kepada saiz bekas induk.

var chart = echarts.init(document.getElementById('chart'));

2. Gunakan pendengar acara ubah saiz:

Kaedah lain ialah menggunakan pendengar acara ubah saiz untuk mengubah saiz carta secara dinamik. Dengan mendengar perubahan saiz tetingkap, anda boleh menetapkan semula lebar dan ketinggian carta apabila saiz tetingkap berubah.

var chart = echarts.init(document.getElementById('chart'));
window.addEventListener('resize', function() {
chart.resize();
});

Dengan cara ini, apabila saiz tetingkap berubah, carta akan mengubah saiz secara automatik agar sesuai dengan saiz tetingkap baharu.

3. Gunakan pertanyaan media CSS:

Anda boleh menggunakan pertanyaan media CSS untuk menetapkan lebar dan ketinggian carta mengikut saiz skrin yang berbeza. Dengan mentakrifkan peraturan gaya yang berbeza dalam CSS, bekas carta boleh bersaiz mengikut lebar dan ketinggian skrin.

<style>
   @media (max-width: 768px) {
     #chart {
       width: 100%;
       height: 300px;
     }
   }
   @media (min-width: 768px) {
     #chart {
       width: 100%;
       height: 500px;
     }
   }
   </style>
   <div id="chart"></div>

Dengan cara ini, apabila lebar skrin kurang daripada 768px, ketinggian bekas carta akan menjadi 300px dan apabila lebar skrin lebih besar daripada atau sama dengan 768px, ketinggian bekas carta akan jadi 500px.

Di atas ialah beberapa kaedah yang biasa digunakan untuk menetapkan saiz penyesuaian carta ECharts. Bergantung pada keperluan dan senario khusus, anda boleh memilih kaedah yang sesuai untuk melaksanakan penyesuaian carta. Sama ada menetapkan saiz bekas menggunakan peratusan, menggunakan pendengar acara ubah saiz atau menggunakan pertanyaan media CSS, pembangun boleh membuat carta yang menyesuaikan diri dengan peranti dan saiz skrin yang berbeza. .

Atas ialah kandungan terperinci Bagaimana untuk menetapkan saiz penyesuaian echarts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!