ECharts 및 Java 인터페이스: 선형 차트, 막대 차트, 원형 차트 등과 같은 통계 차트를 빠르게 구현하는 방법

ECharts 및 Java 인터페이스: 꺾은선형 차트, 막대형 차트, 파이 차트 등의 통계 차트를 빠르게 구현하는 방법, 구체적인 코드 예제가 필요합니다.

인터넷 시대의 도래와 함께 데이터 분석이 점점 더 많아지고 더 중요. 통계 차트는 매우 직관적이고 강력한 표시 방법입니다. 차트는 데이터를 보다 명확하게 표시하여 사람들이 데이터의 의미와 패턴을 더 잘 이해할 수 있게 해줍니다. Java 개발에서는 ECharts 및 Java 인터페이스를 사용하여 다양한 통계 차트를 빠르게 표시할 수 있습니다.

ECharts는 Baidu가 개발한 HTML5 Canvas 기반의 데이터 시각화 차트 라이브러리로 꺾은선형 차트, 막대형 차트, 원형 차트 등 다양한 차트를 쉽게 그릴 수 있습니다. Java 인터페이스는 백엔드 데이터가 프런트엔드 디스플레이와 상호 작용할 수 있도록 하고, Java 코드를 통해 데이터를 프런트엔드에 전달할 수 있는 기술입니다. 다음으로 ECharts와 Java 인터페이스를 사용하여 다양한 통계 차트를 빠르게 표시하는 방법을 소개합니다.

1. 선형 차트 구현

선형 차트는 데이터 포인트를 연결하여 데이터 추세를 나타내는 차트입니다. ECharts에서는 다음 코드를 통해 선형 차트를 구현할 수 있습니다.

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '折线图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

위 코드는 ECharts를 사용하여 선형 차트를 구현하는 방법을 보여줍니다. 차트 제목, x축 및 y축 레이블 등과 같은 차트의 다양한 매개변수를 옵션 개체에서 설정할 수 있습니다. 시리즈의 data 속성에 데이터를 전달하면 해당 데이터를 차트에 표시할 수 있습니다. 마지막으로 setOption 메소드를 사용하여 차트를 렌더링합니다.

Java에서 꺾은선형 차트를 구현하는 방법은 무엇인가요? 다음 Java 코드를 통해 프런트엔드에 데이터를 전달할 수 있습니다.

@RequestMapping("/echarts")
@ResponseBody
public Map<String,Object> echarts(){
    List<String> categories = new ArrayList<String>();
    categories.add("周一");
    categories.add("周二");
    categories.add("周三");
    categories.add("周四");
    categories.add("周五");
    categories.add("周六");
    categories.add("周日");

    List<Integer> data = new ArrayList<Integer>();
    data.add(5);
    data.add(20);
    data.add(36);
    data.add(10);
    data.add(20);
    data.add(30);
    data.add(40);

    Map<String,Object> result = new HashMap<String,Object>();
    result.put("categories",categories);
    result.put("data",data);

    return result;
}

위 코드에서는 Map 객체를 생성하고 x축 데이터와 y축 데이터를 각각 카테고리와 데이터에 넣습니다. 그런 다음 Map 객체를 프런트 엔드로 반환합니다.

마지막으로 다음 JS 코드를 프런트엔드 코드에 추가하여 선 차트의 백엔드 데이터 렌더링을 완료합니다.

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var categories = data.categories;
        var data = data.data;
        var option = {
            title: {
                text: '折线图'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: categories
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: data
            }]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

2. 막대 차트 구현

막대 차트는 크기를 비교하는 데 사용되는 차트입니다. 다양한 카테고리의 데이터를 제공합니다. ECharts에서는 다음 코드를 통해 히스토그램을 구현할 수 있습니다.

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '柱状图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

위 코드는 ECharts를 사용하여 히스토그램을 구현하는 방법을 보여줍니다. 꺾은선형 차트와 마찬가지로 옵션 개체에서 차트 제목, x축 및 y축 레이블 등과 같은 차트의 다양한 매개변수를 설정할 수 있습니다. 동시에 꺾은선형 차트를 막대형 차트로 변환하려면 type 속성을 'bar'로 설정하기만 하면 됩니다.

Java에서 히스토그램을 구현하는 방법은 무엇입니까? 다음 Java 코드를 통해 프런트엔드에 데이터를 전달할 수 있습니다.

@RequestMapping("/echarts")
@ResponseBody
public Map<String,Object> echarts(){
    List<String> categories = new ArrayList<String>();
    categories.add("周一");
    categories.add("周二");
    categories.add("周三");
    categories.add("周四");
    categories.add("周五");
    categories.add("周六");
    categories.add("周日");

    List<Integer> data = new ArrayList<Integer>();
    data.add(5);
    data.add(20);
    data.add(36);
    data.add(10);
    data.add(20);
    data.add(30);
    data.add(40);

    Map<String,Object> result = new HashMap<String,Object>();
    result.put("categories",categories);
    result.put("data",data);

    return result;
}

위 코드에서는 Map 객체를 생성하고 x축 데이터와 y축 데이터를 각각 카테고리와 데이터에 넣습니다. 그런 다음 Map 객체를 프런트 엔드로 반환합니다. 히스토그램의 백엔드 데이터 렌더링을 완료하려면 프런트엔드 코드에 다음 JS 코드를 추가하세요.

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var categories = data.categories;
        var data = data.data;
        var option = {
            title: {
                text: '柱状图'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: categories
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: data
            }]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

3. 원형 차트 구현

원형 차트는 데이터의 비율을 나타내는 데 사용되는 차트입니다. ECharts에서는 다음 코드를 통해 원형 차트를 구현할 수 있습니다.

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

위 코드는 ECharts를 사용하여 원형 차트를 구현하는 방법을 보여줍니다. 꺾은선형 차트 및 막대형 차트와 유사하게 옵션 개체에서 차트 제목, x축 및 y축 레이블 등과 같은 차트의 다양한 매개변수를 설정할 수 있습니다. 시리즈의 data 속성에 데이터를 전달하면 해당 데이터를 차트에 표시할 수 있습니다. 여기서 원형 차트 데이터는 {값:335, 이름:'직접 액세스'}와 같이 값과 이름에 해당하는 형식을 충족해야 합니다.

Java에서 원형 차트를 구현하는 방법은 무엇입니까? 다음 Java 코드를 통해 프런트 엔드에 데이터를 전달할 수 있습니다.

@RequestMapping("/echarts")
@ResponseBody
public List<Map<String,Object>> echarts(){
    List<Map<String,Object>> result = new ArrayList<Map<String,Object>>();

    Map<String,Object> data1 = new HashMap<String,Object>();
    data1.put("value",335);
    data1.put("name","直接访问");
    result.add(data1);

    Map<String,Object> data2 = new HashMap<String,Object>();
    data2.put("value",310);
    data2.put("name","邮件营销");
    result.add(data2);

    Map<String,Object> data3 = new HashMap<String,Object>();
    data3.put("value",234);
    data3.put("name","联盟广告");
    result.add(data3);

    Map<String,Object> data4 = new HashMap<String,Object>();
    data4.put("value",135);
    data4.put("name","视频广告");
    result.add(data4);

    Map<String,Object> data5 = new HashMap<String,Object>();
    data5.put("value",1548);
    data5.put("name","搜索引擎");
    result.add(data5);

    return result;
}

위 코드에서는 5개의 요소로 구성된 Map 배열을 만들고 Map에 값과 이름을 저장합니다. 그런 다음 Map 배열을 프런트 엔드로 반환합니다. 원형 차트의 백엔드 데이터 렌더링을 완료하려면 프런트엔드 코드에 다음 JS 코드를 추가하세요.

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var legendData = [];
        var seriesData = [];
        $.each(data,function(index,item){
            legendData.push(item.name);
            seriesData.push(item);
        });

        var option = {
            title: {
                text: '饼图',
                subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: legendData
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: seriesData
                }
            ]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

요약:

위의 예를 통해 ECharts 및 Java 인터페이스를 사용하는 것이 매우 간단하다는 것을 알 수 있습니다. 통계 차트를 표시합니다. 데이터를 얻으려면 프런트 엔드 코드에서 Java 인터페이스를 호출한 다음 이를 ECharts의 옵션 개체에 전달하기만 하면 됩니다. Java 인터페이스에서는 데이터를 먼저 Map 또는 List와 같은 컬렉션 개체로 캡슐화한 다음 프런트 엔드로 반환해야 합니다. 당연히 Spring Boot를 사용하는 것이 더 편리합니다. ECharts와 Java 인터페이스의 조합은 프런트엔드와 백엔드 분리를 통해 다양한 개발 모델에 적응할 수 있습니다.

위 내용은 ECharts 및 Java 인터페이스: 선형 차트, 막대 차트, 원형 차트 등과 같은 통계 차트를 빠르게 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!