ECharts histogram (horizontal): how to display data ranking
Dec 17, 2023 pm 01:54 PM
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: '小強(qiáng)', score: 80 },
{ name: '小花', score: 88 }
];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>
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:
// 創(chuàng)建圖表實(shí)例
var chart = echarts.init(document.getElementById('chart'));
// 配置圖表選項(xiàng)
var option = {
title: {
text: '學(xué)生成績(jī)排名'
},
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);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!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to implement statistical charts of massive data under the Vue framework
Aug 25, 2023 pm 04:20 PM
How to implement statistical charts of massive data under the Vue framework Introduction: In recent years, data analysis and visualization have played an increasingly important role in all walks of life. In front-end development, charts are one of the most common and intuitive ways of displaying data. The Vue framework is a progressive JavaScript framework for building user interfaces. It provides many powerful tools and libraries that can help us quickly build charts and display massive data. This article will introduce how to implement statistical charts of massive data under the Vue framework, and attach
Some tips for developing data visualization applications using Vue.js and Python
Jul 31, 2023 pm 07:53 PM
Some tips for developing data visualization applications using Vue.js and Python Introduction: With the advent of the big data era, data visualization has become an important solution. In the development of data visualization applications, the combination of Vue.js and Python can provide flexibility and powerful functions. This article will share some tips for developing data visualization applications using Vue.js and Python, and attach corresponding code examples. 1. Introduction to Vue.js Vue.js is a lightweight JavaScript
Graphviz Tutorial: Create Intuitive Data Visualizations
Apr 07, 2024 pm 10:00 PM
Graphviz is an open source toolkit that can be used to draw charts and graphs. It uses the DOT language to specify the chart structure. After installing Graphviz, you can use the DOT language to create charts, such as drawing knowledge graphs. After you generate your graph, you can use Graphviz's powerful features to visualize your data and improve its understandability.
How to use Layui to implement drag-and-drop data visualization dashboard function
Oct 26, 2023 am 11:27 AM
How to use Layui to implement drag-and-drop data visualization dashboard function Introduction: Data visualization is increasingly used in modern life, and the development of dashboards is an important part of it. This article mainly introduces how to use the Layui framework to implement a drag-and-drop data visualization dashboard function, allowing users to flexibly customize their own data display modules. 1. Preparation to download the Layui framework. First, we need to download and configure the Layui framework. You can download it on Layui’s official website (https://www
How to use C++ for efficient data visualization?
Aug 25, 2023 pm 08:57 PM
How to use C++ for efficient data visualization? Data visualization is to display abstract data through visual means such as charts and graphs, making it easier for people to understand and analyze the data. In the era of big data, data visualization has become an essential skill for workers in various industries. Although many commonly used data visualization tools are mainly developed based on scripting languages ??such as Python and R, C++, as a powerful programming language, has high operating efficiency and flexible memory management, which also plays an important role in data visualization. . This article will
ECharts histogram (horizontal): how to display data ranking
Dec 17, 2023 pm 01:54 PM
ECharts histogram (horizontal): How to display data rankings requires specific code examples. In data visualization, histogram is a commonly used chart type, which 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 containing ranking data
Visualization technology of PHP data structure
May 07, 2024 pm 06:06 PM
There are three main technologies for visualizing data structures in PHP: Graphviz: an open source tool that can create graphical representations such as charts, directed acyclic graphs, and decision trees. D3.js: JavaScript library for creating interactive, data-driven visualizations, generating HTML and data from PHP, and then visualizing it on the client side using D3.js. ASCIIFlow: A library for creating textual representation of data flow diagrams, suitable for visualization of processes and algorithms.
How to use maps to display data in Highcharts
Dec 18, 2023 pm 04:06 PM
How to use maps to display data in Highcharts Introduction: In the field of data visualization, using maps to display data is a common and intuitive way. Highcharts is a powerful JavaScript charting library that provides rich functionality and flexible configuration options. This article will introduce how to use maps to display data in Highcharts and provide specific code examples. Introducing map data: When using a map, you first need to prepare map data. High
