ECharts histogram (horizontal): how to display data ranking-JS Tutorial-php.cn

ECharts histogram (horizontal): how to display data ranking

WBOY

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

Original

1477 people have browsed it

ECharts histogram (horizontal): how to display data ranking

ECharts histogram (horizontal): How to display data rankings, specific code examples are required

In data visualization, histogram is a commonly used chart type. Can visually display the size and relative relationship of data. ECharts is an excellent data visualization tool that provides developers with rich chart types and powerful configuration options. This article will introduce how to use the histogram (horizontal) in ECharts to display data rankings, and give specific code examples.

First, we need to prepare a data set containing ranking data. Suppose we have a student data set containing students' names and scores. We want to use a bar chart to display the student's score ranking. The following is a simplified data set example:

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

Copy after login

Next, we need to introduce the ECharts library and create a container to display the histogram. The following is a basic HTML template:

<!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>

Copy after login

Then, we can use the API provided by ECharts to configure and draw the histogram. The following is a simple bar chart configuration code example:

// 创建图表实例
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);

Copy after login

In the above code, we first create a chart instance and bind it to HTML through the echarts.init method on the specified container. We then configured the chart title, x-axis, and y-axis, with the y-axis data coming from the name field in our target dataset. Finally, we configured the histogram series and specified the histogram data through the data attribute, displayed the numerical label through the label attribute, and set the label's position to the right.

Finally, we render and display the histogram by calling the chart.setOption method. After refreshing the browser page, we will see the student's performance ranking displayed in the form of a bar chart. The length of the bar indicates the size of the score, and the numerical label is displayed on the right side of the bar.

To sum up, this article introduces how to use the histogram (horizontal) in ECharts to display data rankings, and provides specific code examples. Through these sample codes, developers can flexibly use ECharts to display and analyze data in actual projects to achieve data visualization needs.

The above is the detailed content of ECharts histogram (horizontal): how to display data ranking. For more information, please follow other related articles on the PHP Chinese website!