How to use ECharts and Java interface to create beautiful 3D statistical charts-javaTutorial-php.cn

How to use ECharts and Java interface to create beautiful 3D statistical charts

WBOY

Release： 2023-12-18 17:59:15

Original

1217 people have browsed it

How to use ECharts and Java interface to create beautiful 3D statistical charts

In recent years, the development of big data has made data visualization an increasingly important field. Data visualization not only makes it easier for people to understand and analyze data, but also increases the beauty of the data. In the field of visualization, 3D statistical charts are a commonly used method that can more intuitively display the characteristics of data. This article will introduce how to use ECharts and Java interfaces to create beautiful 3D statistical charts, and provide specific code examples.

ECharts Introduction

[ECharts](https://echarts.apache.org/zh/index.html) is an open source, JavaScript-based visualization library for building interactive An efficient chart and data visualization interface. ECharts supports a variety of chart types including bar charts, line charts, scatter charts, maps, etc. It also supports dynamic data and interactive features.

Java Interface Introduction

In most cases, we need to get data from the background to draw charts. Therefore, we need to use Java interface to obtain data. Java interface is a technology used to interact with the background and obtain data. In this article, we will use the Java interface to obtain randomly generated data to draw 3D statistical charts.

Step 1: Preparation

First, we need to download ECharts. You can download the latest version from [ECharts official website](https://echarts.apache.org/zh/download.html). In addition, we also need a Java IDE (such as Eclipse) in order to write Java code.

Step 2: Write Java code

The following is the Java code to get randomly generated data from the background:

@RequestMapping("/getChartData")
@ResponseBody
public String getChartData() {
    int min = 1;
    int max = 100;
    JSONArray jsonArray = new JSONArray();
    for(int i = 0; i < 10; i++) {
        int num1 = (int)(Math.random() * (max - min) + min);
        int num2 = (int)(Math.random() * (max - min) + min);
        int num3 = (int)(Math.random() * (max - min) + min);
        jsonArray.add(new JSONArray(Arrays.asList("data" + (i + 1), num1, num2, num3)));
    }
    return jsonArray.toJSONString();
}

Copy after login

In the above code, we use the Spring MVC framework to write Java code. First, we set the maximum and minimum values. Then, randomly generate three integers via the Math.random() method and add them to a JSONArray object. Finally, we convert the JSONArray object to a string and back.

Step 3: Write HTML code

The following is the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D统计图示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="myChart" style="width: 800px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('myChart'));

        var option = {
            title: {
                text: '3D统计图示例'
            },
            tooltip: {},
            legend: {
                data: ['data1', 'data2', 'data3']
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {},
            zAxis: {},
            grid3D: {},
            series: [{
                name: 'data1',
                type: 'bar3D',
                data: []
            },{
                name: 'data2',
                type: 'bar3D',
                data: []
            },{
                name: 'data3',
                type: 'bar3D',
                data: []
            }]
        };
        myChart.setOption(option);
        $.ajax({
            url: 'getChartData',
            type: 'POST',
            success: function (data) {
                data = JSON.parse(data);
                var xAxisData = data.map(function (item) {
                    return item[0];
                });
                var data1 = [], data2 = [], data3 = [];
                for(var i = 0; i < data.length; i++) {
                    data1.push([data[i][0], data[i][1], i]);
                    data2.push([data[i][0], data[i][2], i]);
                    data3.push([data[i][0], data[i][3], i]);
                }
                myChart.setOption({
                    xAxis: {
                        data: xAxisData
                    },
                    series: [{
                        data: data1
                    }, {
                        data: data2
                    }, {
                        data: data3
                    }]
                });
            }
        });

    </script>
</body>
</html>

Copy after login

In the above code, we used the jQuery library to obtain randomly generated data. First, we created a div element to display the 3D chart. Then, we use the echarts.init() method to initialize the 3D statistical chart and set some basic options, such as coordinate axes, legend, etc. Next, we use the $.ajax() method to obtain data from the background and display the data in a 3D statistical chart.

It is worth mentioning that we also use three different colors to represent different data series.

Step 4: Run the program

Finally, we can open the HTML file in the browser to run our program. In the browser, we can see a beautiful 3D statistical chart.

Conclusion

This article introduces how to use ECharts and Java interface to create beautiful 3D statistical charts. We first get randomly generated data from the background, and then use ECharts to visualize the data. In this way, we can understand and analyze the data more intuitively and improve the beauty of the data. If you are interested in data visualization, you might as well try using ECharts and Java interface to create your own data visualization program!

The above is the detailed content of How to use ECharts and Java interface to create beautiful 3D statistical charts. For more information, please follow other related articles on the PHP Chinese website!