ECharts histogram (multidimensional): how to display data grouping and comparison

ECharts histogram (multidimensional): How to display data grouping and comparison, specific code examples are required

ECharts is an open source visualization library based on JavaScript, used to display various types of data charts. The histogram is a common data visualization method that can be used to display the grouping and comparison of data in different groups or categories. This article will introduce in detail how to use the multi-dimensional histogram function of ECharts to display data grouping and comparison, and provide specific code examples for readers' reference.

1. Overview of ECharts multi-dimensional histogram

A multi-dimensional histogram is a chart that can display multiple data indicators at the same time. It can also be called a bar chart, bar chart or histogram. . It can be used to display the grouping and comparison of data in different groups or categories, and is suitable for displaying data sets containing multiple dimensions. For example, when displaying the company's sales, the sales of different product lines, sales of different sales regions and other dimensions can be displayed simultaneously in a multi-dimensional column chart to quickly compare the relationship between different data.

ECharts' multi-dimensional histogram supports a variety of different dimension combinations, such as different values ​​of the same dimension as different histogram groups, or combinations of different dimensions as different histogram groups, etc. After the combination of dimensions is determined, each histogram group can be customized according to different colors, color gradients, gaps between histograms, histogram widths, etc., to adapt to different needs.

2. How to use ECharts multi-dimensional histogram

1. Prepare data

Before using ECharts multi-dimensional histogram to display data, you need to prepare the data first. The format of the data needs to comply with the format specified by ECharts. You can check the specific format requirements in the official documentation. The following is an example:

let data = [
   {product: 'A', area: 'Shanghai', sales: 800},
   {product: 'B', area: 'Shanghai', sales: 1200},
   {product: 'A', area: 'Beijing', sales: 1000},
   {product: 'B', area: 'Beijing', sales: 1400},
];

The above data contains data in three dimensions: product line, sales region and sales.

2. Configuring ECharts parameters

After preparing the data, you need to configure the ECharts parameters. ECharts provides a special parameter configuration method for multi-dimensional histograms. You can view the specific parameter descriptions in the official documentation. The following is an example:

let option = {
   xAxis: {
       type: 'category',
       data: ['Shanghai', 'Beijing']
   },
   yAxis: {
       type: 'value'
   },
   series: [
       {
           type: 'bar',
           name: 'Product A',
           data: [800, 1000]
       },
       {
           type: 'bar',
           name: 'Product B',
           data: [1200, 1400]
       }
   ]
};

In the above code, the x-axis represents the sales region dimension, and the y-axis represents the sales dimension. Two histogram groups are defined in the series array, which are the sales data of product A and product B.

3. Rendering ECharts charts

After completing the ECharts parameter configuration, you can bind the parameters to the DOM elements in the HTML page through the API provided by ECharts to generate specific histogram. The following is an example:

let chart = echarts.init(document.getElementById('chart_container'));
chart.setOption(option);

In the above code, 'chart_container' is the ID value of a DIV element in the HTML page, which is used to store the generated histogram. The echarts.init() method is used to initialize the ECharts instance, and the setOption() method is used to set the parameters of the instance.

3. Code Example

The following is a simple code example that demonstrates how to use ECharts multi-dimensional histogram to display data grouping and comparison. The code shows two sets of sales data, namely sales data for different product lines and sales regions.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>ECharts多维柱状图示例</title>
</head>
<body>
   <div id="chart_container" style="width: 600px; height: 400px;"></div>
   <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
   <script>
       // 准备数据
       let data = [
           {product: 'A', area: 'Shanghai', sales: 800},
           {product: 'B', area: 'Shanghai', sales: 1200},
           {product: 'A', area: 'Beijing', sales: 1000},
           {product: 'B', area: 'Beijing', sales: 1400},
       ];
       
       // 配置ECharts参数
       let option = {
           legend: {},
           tooltip: {},
           dataset: {
               dimensions: ['area', 'product', 'sales'],
               source: data
           },
           xAxis: {
               type: 'category',
               axisLabel: {
                   interval: 0,
                   rotate: 45
               }
           },
           yAxis: {},
           series: [
               {type: 'bar', seriesLayoutBy: 'row'},
               {type: 'bar', seriesLayoutBy: 'row'}
           ]
       };
       
       // 渲染ECharts图表
       let chart = echarts.init(document.getElementById('chart_container'));
       chart.setOption(option);
   </script>
</body>
</html>

In the above example code, the legend parameter is used to configure the position and style of the legend, the tooltip is used to configure the prompt box style when the mouse is hovered, the dataset parameter is used to configure the dataset format, and dimensions are used to define the data The dimension order of the set, source is used to specify the data source.

The xAxis parameter is used to configure the style of the x-axis, the interval and rotate attributes in axisLabel are used to control the text display mode of the x-axis label, and yAxis is used to configure the style of the y-axis.

series is used to define the style of the histogram group, where type represents the chart type, and seriesLayoutBy represents the drawing method using rows or columns as data dimensions.

Through the above code examples, readers can have a deeper understanding of the usage of ECharts multi-dimensional histograms, and then display data grouping and comparison more flexibly in practical applications.

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