Gunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik untuk perbandingan data berbilang saluran

Gunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik untuk perbandingan data berbilang saluran

Dengan perkembangan berterusan Internet, semakin banyak produk yang pelbagai telah muncul di pasaran, dan produk ini sering dijual melalui saluran yang berbeza , seperti saluran dalam talian, saluran luar talian, saluran media sosial, dsb. Oleh itu, statistik data jualan daripada saluran yang berbeza dan perbandingan prestasi jualan antara saluran yang berbeza adalah sangat penting untuk membuat keputusan korporat. Artikel ini akan memperkenalkan cara menggunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik untuk perbandingan data berbilang saluran.

1. Penyediaan

1. Reka bentuk jadual pangkalan data

Pertama, anda perlu mereka bentuk jadual pangkalan data untuk menyimpan data jualan daripada saluran yang berbeza. Artikel ini mengambil pangkalan data MySQL sebagai contoh untuk mencipta pangkalan data bernama "jualan" dan jadual data bernama "channel_sales" di dalamnya, seperti yang ditunjukkan di bawah:

CREATE JADUAL channel_sales (
id int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '销售记录ID',
channel_name varchar(50) NOT NULL COMMENT '渠道名称',
sales_date date NOT NULL COMMENT '销售日期',
sales_amount decimal(10,2) NOT NULL COMMENT '销售金额',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=' Data jualan daripada saluran berbeza';

2. Penulisan kod belakang Java

Seterusnya, anda perlu menulis kod belakang Java untuk menyediakan data jualan dalam pangkalan data ke halaman hujung hadapan. Artikel ini menggunakan rangka kerja Spring Boot dan menggunakan MyBatis untuk akses data. Kodnya adalah seperti berikut:

(1) Cipta kelas entiti ChannelSales

kelas awam ChannelSales {

private Integer id; // 销售记录ID
private String channelName; // 渠道名称
private Date salesDate; // 销售日期
private BigDecimal salesAmount; // 销售金额

// 省略getters和setters方法

}

(2) Cipta antara muka ChannelSalesMapper

@antara muka awam ChannelSalesMapper
(antara muka awam ChannelSalesMapper

) Cipta kelas pelaksanaan ChannelSalesServiceImpl

@Service

kelas awam ChannelSalesServiceImpl melaksanakan ChannelSalesService {

/**
 * 查询不同渠道的销售数据
 * @param startDate 开始日期
 * @param endDate 结束日期
 * @return 销售数据列表
 */
List<ChannelSales> selectByDate(@Param("startDate") Date startDate,
                                @Param("endDate") Date endDate);

}

Reka bentuk halaman hadapan hadapan

perlu direka bentuk untuk halaman jualan akhir sehingga akhir jualan daripada saluran yang berbeza. Artikel ini menggunakan Echarts.js sebagai pustaka carta dan menggabungkannya dengan Bootstrap untuk reka letak halaman.

2. Proses pelaksanaan

Data jualan pertanyaan

Mula-mula, dapatkan julat tarikh pertanyaan dari muka hadapan dan hantar permintaan Ajax ke bahagian belakang untuk mendapatkan data jualan daripada saluran yang berbeza. Kodnya adalah seperti berikut:

// Tanya pemilih julat tarikh

$('#date-range').daterangepicker({

@Autowired
private ChannelSalesMapper channelSalesMapper;

/**
 * 查询不同渠道的销售数据
 * @param startDate 开始日期
 * @param endDate 结束日期
 * @return 销售数据列表
 */
@Override
public List<ChannelSales> getSalesData(Date startDate, Date endDate) {
    return channelSalesMapper.selectByDate(startDate, endDate);
}

});

// Dengar acara klik butang pertanyaan

$(' #query- btn').click(function() {

startDate: '2021-01-01',
endDate: '2021-12-31'

});

Selepas menerima permintaan pertanyaan di latar belakang, hubungi kaedah getSalesData dalam ChannelSalesService untuk menanyakan data jualan daripada pangkalan data dan mengembalikannya ke hadapan -halaman akhir. Kodnya adalah seperti berikut:

@RestController
@RequestMapping("/api")

kelas awam ApiController {

var range = $('#date-range').data('daterangepicker');

// 发送Ajax请求
$.ajax({
    type: 'GET',
    url: '/api/sales-data',
    data: {
        startDate: range.startDate.format('YYYY-MM-DD'),
        endDate: range.endDate.format('YYYY-MM-DD')
    },
    success: function(result) {
        // 处理查询结果
        drawChart(result.data);
    }
});

}

2. Lukis carta

Setelah data penggunaan diperoleh, anda boleh mendapatkan data jualan, anda boleh untuk melukis carta Statistik yang sepadan. Artikel ini menggunakan carta pai dan carta bar untuk memaparkan bahagian jualan dan kedudukan jualan bagi saluran yang berbeza. . .

3. Paparan kesan

Akhir sekali, kesan yang dicapai ditunjukkan dalam rajah di bawah:

Rajah 1 Perkadaran jualan saluran berbeza

Rajah 2 Kedudukan jualan saluran berbeza

Ia boleh dilihat secara intuitif daripada carta saluran dalam talian menyumbang bahagian terbesar jualan Pada masa yang sama, Tidak banyak perbezaan dalam jualan antara saluran dalam talian dan luar talian, tetapi jualan melalui saluran media sosial agak rendah. Data ini membantu syarikat memahami peluang perniagaan merentas saluran yang berbeza dan membuat keputusan yang sesuai.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik untuk perbandingan data berbilang saluran. Dengan cara ini, bukan sahaja data jualan saluran yang berbeza boleh dipaparkan secara visual, tetapi ia juga boleh membantu perusahaan memahami dengan lebih baik persaingan dan peluang perniagaan antara saluran, untuk membuat keputusan yang sepadan. Pelaksanaan khusus boleh dilaraskan secara fleksibel mengikut keperluan anda sendiri untuk menyesuaikan diri dengan senario perniagaan yang berbeza.

Atas ialah kandungan terperinci Gunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik untuk perbandingan data berbilang saluran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!