ECharts histogram (mendatar): cara memaparkan kedudukan data-tutorial js-php.cn

ECharts histogram (mendatar): cara memaparkan kedudukan data

WBOY

Lepaskan： 2023-12-17 13:54:37

asal

1492 orang telah melayarinya

ECharts histogram (mendatar): cara memaparkan kedudukan data

ECharts histogram (mendatar): Cara memaparkan kedudukan data, contoh kod khusus diperlukan

Dalam visualisasi data, histogram ialah jenis carta yang biasa digunakan, yang boleh memaparkan saiz dan hubungan relatif data secara visual. ECharts ialah alat visualisasi data yang sangat baik yang menyediakan pembangun dengan jenis carta yang kaya dan pilihan konfigurasi yang berkuasa. Artikel ini akan memperkenalkan cara menggunakan histogram (mendatar) dalam ECharts untuk memaparkan kedudukan data dan memberikan contoh kod khusus.

Pertama, kita perlu menyediakan set data yang mengandungi data kedudukan. Katakan kita mempunyai set data pelajar yang mengandungi nama dan markah pelajar. Kami ingin menggunakan carta bar untuk memaparkan kedudukan skor pelajar. Berikut ialah contoh set data yang dipermudahkan:

var data = [
  { name: '小明', score: 92 },
  { name: '小红', score: 85 },
  { name: '小刚', score: 76 },
  { name: '小强', score: 80 },
  { name: '小花', score: 88 }
];

Salin selepas log masuk

Seterusnya, kita perlu memperkenalkan perpustakaan ECharts dan mencipta bekas untuk memaparkan histogram. Berikut ialah templat HTML asas:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts柱状图示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
</body>
</html>

Salin selepas log masuk

Kemudian, kita boleh menggunakan API yang disediakan oleh ECharts untuk mengkonfigurasi dan melukis histogram. Berikut ialah contoh kod konfigurasi carta bar ringkas:

// 创建图表实例
var chart = echarts.init(document.getElementById('chart'));

// 配置图表选项
var option = {
  title: {
    text: '学生成绩排名'
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: data.map(item => item.name)
  },
  series: [{
    type: 'bar',
    data: data.map(item => item.score),
    label: {
      show: true,
      position: 'right',
      formatter: '{c}'
    }
  }]
};

// 绘制图表
chart.setOption(option);

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mencipta contoh carta dan mengikatnya pada bekas yang dinyatakan dalam HTML melalui kaedah echarts.init superior. Kami kemudiannya mengkonfigurasikan tajuk carta, paksi-x dan paksi-y, dengan data paksi-y datang daripada medan nama dalam set data sasaran kami. Akhir sekali, kami mengkonfigurasi siri histogram dan menentukan data histogram melalui atribut data, memaparkan label berangka melalui atribut label dan menetapkan kedudukan label ke sebelah kanan. echarts.init方法将其绑定到HTML中指定的容器上。然后，我们配置了图表的标题、x轴和y轴，其中y轴的数据来自于我们目标数据集中的姓名字段。最后，我们配置了柱状图系列，并通过data属性指定了柱状图的数据，通过label属性来显示数值标签，并将标签的位置设置为右侧。

最后，我们通过调用chart.setOption

Akhir sekali, kami membuat dan memaparkan histogram dengan memanggil kaedah cart.setOption. Selepas memuat semula halaman penyemak imbas, kita akan melihat kedudukan prestasi pelajar dipaparkan dalam bentuk carta bar Panjang bar menunjukkan saiz skor, dan label berangka dipaparkan di sebelah kanan bar.

Ringkasnya, artikel ini memperkenalkan cara menggunakan histogram (mendatar) dalam ECharts untuk memaparkan kedudukan data dan menyediakan contoh kod khusus. Melalui kod sampel ini, pembangun boleh menggunakan ECharts secara fleksibel untuk memaparkan dan menganalisis data dalam projek sebenar untuk mencapai keperluan visualisasi data. 🎜

Atas ialah kandungan terperinci ECharts histogram (mendatar): cara memaparkan kedudukan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!