Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik data berbilang dimensi-tutorial php-php.cn

Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik data berbilang dimensi

WBOY

Lepaskan： 2023-12-18 11:06:02

asal

932 orang telah melayarinya

Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik data berbilang dimensi

Cara menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik data berbilang dimensi

Abstrak: ECharts ialah perpustakaan carta visualisasi data sumber terbuka oleh Baidu, yang boleh menyokong pelbagai jenis carta dan operasi interaktif. Menggabungkan antara muka ECharts dan php, anda boleh merealisasikan paparan carta statistik data berbilang dimensi dengan mudah. Artikel ini akan memperkenalkan cara menggunakan ECharts untuk melukis pelbagai jenis carta dan menggunakan antara muka php untuk menghantar data ke bahagian hadapan.

Kata kunci: ECharts, antara muka php, data berbilang dimensi, paparan carta statistik

1. Pengenalan latar belakang

Dalam visualisasi data, paparan carta statistik ialah cara yang biasa dan penting. ECharts menyediakan pelbagai jenis carta dan operasi interaktif untuk memenuhi pelbagai keperluan paparan data. Melalui antara muka php, kami boleh memindahkan data bahagian belakang dengan mudah ke bahagian hadapan untuk mencapai paparan carta dinamik.

2. Penggunaan asas ECharts

Perkenalkan perpustakaan ECharts

Perkenalkan fail perpustakaan ECharts ke dalam halaman html dan buat div bekas untuk mengehoskan carta.

<!DOCTYPE html>
<html>
<head>
  <script src="echarts.min.js"></script>
</head>
<body>
  <div id="chart"></div>
</body>
</html>

Salin selepas log masuk

Buat contoh carta

Dalam JavaScript, buat contoh carta dan nyatakan bekas dan jenis carta.

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

Salin selepas log masuk

Konfigurasikan parameter carta

Tentukan gaya dan data carta dengan mengkonfigurasi parameter carta.

var option = {
  title: {
    text: '图表标题'
  },
  xAxis: {
    data: ['类别1', '类别2', '类别3']
  },
  yAxis: {},
  series: [
    {
      name: '系列1',
      type: 'bar',
      data: [10, 20, 30]
    },
    {
      name: '系列2',
      type: 'bar',
      data: [15, 25, 35]
    }
  ]
};

Salin selepas log masuk

Render carta

Gunakan parameter konfigurasi pada carta dengan memanggil kaedah carta.setOption.

chart.setOption(option);

Salin selepas log masuk

3 Digabungkan dengan antara muka php untuk memindahkan data

Pemprosesan data belakang

Dalam antara muka php, dapatkan data daripada pangkalan data atau sumber data lain mengikut keperluan perniagaan dan proses data.

$data = array(
  'categories' => ['类别1', '类别2', '类别3'],
  'series' => array(
    array(
      'name' => '系列1',
      'data' => [10, 20, 30]
    ),
    array(
      'name' => '系列2',
      'data' => [15, 25, 35]
    )
  )
);

echo json_encode($data);  // 将数据转为 json 格式输出

Salin selepas log masuk

Permintaan data bahagian hadapan

Gunakan objek XMLHttpRequest dalam JavaScript untuk menghantar permintaan data ke antara muka php dan menghuraikan data yang dikembalikan.

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    var option = {
      title: {
        text: '图表标题'
      },
      xAxis: {
        data: data.categories
      },
      yAxis: {},
      series: data.series
    };

    chart.setOption(option);
  }
};

xhr.open('GET', 'data.php', true);
xhr.send();

Salin selepas log masuk

Empat. Pelaksanaan pelbagai jenis carta

Carta bar

var option = {
  title: {
    text: '条形图'
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['类别1', '类别2', '类别3']
  },
  series: [
    {
      name: '系列1',
      type: 'bar',
      data: [10, 20, 30]
    }
  ]
};

Salin selepas log masuk

Carta pai

var option = {
  title: {
    text: '饼图'
  },
  series: [
    {
      name: '系列1',
      type: 'pie',
      radius: '55%',
      data: [
        {value: 10, name: '类别1'},
        {value: 20, name: '类别2'},
        {value: 30, name: '类别3'}
      ]
    }
  ]
};

Salin selepas log masuk

Carta garisan

rreee

Rreee antara muka, kita boleh Menyedari dengan mudah paparan carta statistik data berbilang dimensi. Melalui jenis carta yang kaya dan operasi interaktif ECharts, serta pemprosesan data dan penghantaran antara muka PHP, kami boleh memenuhi paparan data keperluan perniagaan yang berbeza. Saya harap artikel ini akan membantu untuk melaksanakan paparan carta statistik menggunakan ECharts dan php.

Atas ialah kandungan terperinci Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan paparan carta statistik data berbilang dimensi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!