Home >Web Front-end >JS Tutorial >ECharts multi-axis chart: how to display multi-dimensional data

ECharts multi-axis chart: how to display multi-dimensional data

WBOYOriginal: 2023-12-18 18:39:542007browse

ECharts multi-axis chart: How to display multi-dimensional data, specific code examples are needed

Introduction:
With the advent of the big data era, we need better effectively display complex multi-dimensional data. As a powerful visualization library, ECharts provides a variety of chart types, among which multi-axis charts are one of the important tools for displaying multi-dimensional data. This article will introduce what a multi-axis chart is and how to use ECharts to display multi-dimensional data, and provide corresponding code examples.

1. What is a multi-axis chart
A multi-axis chart is a chart that can display multiple data series with different data units and magnitudes on the same chart. By using multiple axes, one for each data series, we can more intuitively compare data across different dimensions.

2. ECharts multi-axis chart configuration items
To create a multi-axis chart, we need to set multiple properties in the option object of ECharts. The following are the main configuration items that need to be set:

tooltip attribute: used to display detailed information of the data series. For example, when the mouse is hovered over the chart, the specific values of the data will be displayed.
legend attribute: used to configure the legend, that is, the color identification in the chart, used to distinguish different data series.
xAxis and yAxis properties: used to configure multiple axes. xAxis configures the x-axis, and yAxis configures the y-axis. Multiple axes can be configured in array form.
series attribute: used to configure data series. Each data series corresponds to an axis and can have different data types and chart presentation methods.

3. Code Example
Below we use a specific code example to demonstrate how to use ECharts to create a multi-axis chart to display multi-dimensional data. Let's start with a merchandising example.

Introduce the ECharts library and related style files:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-axis Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>
</body>
</html>

Create a multi-axis chart and configure related properties:

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

var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['电视销量', '冰箱销量', '洗衣机销量']
    },
    xAxis: [
        {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '销量'
        },
        {
            type: 'value',
            name: '销售额'
        }
    ],
    series: [
        {
            name: '电视销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70]
        },
        {
            name: '冰箱销量',
            type: 'bar',
            data: [80, 100, 120, 150, 110]
        },
        {
            name: '洗衣机销量',
            type: 'line',
            yAxisIndex: 1,
            data: [1000, 1500, 2000, 1800, 1600]
        }
    ]
};

chart.setOption(option);

In the above code, we set up three data series: TV sales, refrigerator sales and washing machine sales. Among them, TV sales and refrigerator sales are displayed using bar charts, and washing machine sales are displayed using line charts. Sales volume and sales are displayed using different y-axes.

4. Summary
ECharts provides the function of multi-axis chart, which can easily display multi-dimensional data. By setting appropriate configuration items, we can create beautiful and intuitive multi-axis graphs. Through the sample code in this article, you can quickly get started using ECharts to draw multi-axis charts and apply it to your own projects.

Reference link:
[ECharts official document](https://echarts.apache.org/zh/index.html)

The above is the detailed content of ECharts multi-axis chart: how to display multi-dimensional data. For more information, please follow other related articles on the PHP Chinese website!

echarts html 数据类型对象 apache https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to insert beautiful charts into your website using HighchartsNext article：How to insert beautiful charts into your website using Highcharts

See more

ECharts multi-axis chart: how to display multi-dimensional data

Related articles