Rumah > Java > javaTutorial > 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

王林
Lepaskan: 2023-12-17 13:43:44
asal
1097 orang telah melayarinya

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';

  1. 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方法
Salin selepas log masuk

}

(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);
Salin selepas log masuk

}
  1. 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
  1. 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);
}
Salin selepas log masuk

});


// Dengar acara klik butang pertanyaan

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

startDate: '2021-01-01',
endDate: '2021-12-31'
Salin selepas log masuk

});

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);
    }
});
Salin selepas log masuk
}
  1. 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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan