Antara muka ECharts dan Java: Cara melaksanakan carta statistik dengan cepat seperti carta garis, carta bar, carta pai, dsb.

ECharts dan antara muka Java: Bagaimana untuk melaksanakan carta statistik dengan cepat seperti carta garis, carta bar, carta pai, dll., contoh kod khusus diperlukan

Dengan kemunculan era Internet, analisis data telah menjadi lebih dan lebih penting. Carta statistik ialah kaedah paparan yang sangat intuitif dan berkuasa Carta boleh memaparkan data dengan lebih jelas, membolehkan orang ramai memahami konotasi dan corak data. Dalam pembangunan Java, kita boleh menggunakan antara muka ECharts dan Java untuk memaparkan pelbagai carta statistik dengan cepat.

ECharts ialah perpustakaan carta visualisasi data berdasarkan Kanvas HTML5 yang dibangunkan oleh Baidu Ia boleh melukis pelbagai carta dengan mudah, termasuk carta garis, carta bar, carta pai, dsb. Antara muka Java ialah teknologi yang membolehkan data bahagian belakang berinteraksi dengan paparan bahagian hadapan, dan boleh menghantar data ke bahagian hadapan melalui kod Java. Seterusnya, kami akan memperkenalkan cara menggunakan antara muka ECharts dan Java untuk memaparkan pelbagai carta statistik dengan cepat.

1. Laksanakan Carta Garisan

Carta garis ialah carta yang mewakili aliran data dengan menyambungkan titik data. Dalam ECharts, kita boleh melaksanakan carta garisan melalui kod berikut:

// 基于准备好的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);

Kod di atas menunjukkan cara menggunakan ECharts untuk melaksanakan carta garis. Kita boleh menetapkan pelbagai parameter carta dalam objek pilihan, seperti tajuk carta, label paksi-x dan paksi-y, dsb. Dengan menghantar data kepada atribut data dalam siri, data yang sepadan boleh dipaparkan dalam carta. Akhir sekali gunakan kaedah setOption untuk memaparkan carta.

Bagaimana untuk melaksanakan carta garis di Jawa? Kami boleh menghantar data ke hujung hadapan melalui kod Java berikut:

@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;
}

Dalam kod di atas, kami mencipta objek Peta dan meletakkan data paksi-x dan paksi-y ke dalam kategori dan data masing-masing. Kemudian kembalikan objek Peta ke hujung hadapan.

Akhir sekali, tambah kod JS berikut pada kod bahagian hadapan untuk melengkapkan pemaparan data bahagian belakang carta garis:

$.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. Melaksanakan carta bar

Carta bar ialah carta yang digunakan untuk membandingkan saiz daripada kategori data yang berbeza. Dalam ECharts, kita boleh melaksanakan histogram melalui kod berikut:

// 基于准备好的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);

Kod di atas menunjukkan cara menggunakan ECharts untuk melaksanakan histogram. Sama seperti carta garis, kita boleh menetapkan pelbagai parameter carta dalam objek pilihan, seperti tajuk carta, label paksi-x dan paksi-y, dsb. Pada masa yang sama, kita hanya perlu menetapkan atribut jenis kepada 'bar' untuk menukar carta garis kepada carta bar.

Bagaimana untuk melaksanakan histogram di Jawa? Kami boleh menghantar data ke hujung hadapan melalui kod Java berikut:

@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;
}

Dalam kod di atas, kami mencipta objek Peta dan meletakkan data paksi-x dan paksi-y ke dalam kategori dan data masing-masing. Kemudian kembalikan objek Peta ke hujung hadapan. Tambahkan kod JS berikut pada kod bahagian hadapan untuk melengkapkan pemaparan data bahagian belakang histogram:

$.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. Melaksanakan carta pai

Carta pai ialah carta yang digunakan untuk mewakili perkadaran data. Dalam ECharts, kita boleh melaksanakan carta pai melalui kod berikut:

// 基于准备好的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);

Kod di atas menunjukkan cara menggunakan ECharts untuk melaksanakan carta pai. Sama seperti carta garis dan carta bar, kita boleh menetapkan pelbagai parameter carta dalam objek pilihan, seperti tajuk carta, label paksi-x dan paksi-y, dsb. Dengan menghantar data kepada atribut data dalam siri, data yang sepadan boleh dipaparkan dalam carta. Harap maklum bahawa data carta pai di sini perlu memenuhi format yang sepadan dengan nilai dan nama, seperti {value:335, name:'direct access'}.

Bagaimana untuk melaksanakan carta pai di Jawa? Kami boleh menghantar data ke hujung hadapan melalui kod Java berikut:

@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;
}

Dalam kod di atas, kami mencipta tatasusunan Peta dengan 5 elemen dan menyimpan nilai dan nama dalam Peta. Kemudian kembalikan tatasusunan Peta ke hujung hadapan. Tambahkan kod JS berikut pada kod bahagian hadapan untuk melengkapkan pemaparan data bahagian belakang carta pai:

$.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');
    }
});

Ringkasan:

Melalui contoh di atas, kita dapati bahawa penggunaan ECharts dan antara muka Java adalah sangat mudah untuk memaparkan carta statistik. Anda hanya perlu memanggil antara muka Java dalam kod bahagian hadapan untuk mendapatkan data, dan kemudian hantarkannya ke objek pilihan ECharts. Dalam antara muka Java, data perlu dirangkumkan ke dalam objek koleksi seperti Peta atau Senarai dahulu, dan kemudian dikembalikan ke bahagian hadapan. Sememangnya, lebih mudah untuk menggunakan Spring Boot. Gabungan antara muka ECharts dan Java boleh menyesuaikan diri dengan pelbagai model pembangunan dengan pemisahan bahagian hadapan dan belakang.

Atas ialah kandungan terperinci Antara muka ECharts dan Java: Cara melaksanakan carta statistik dengan cepat seperti carta garis, carta bar, carta pai, dsb.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!