Verwenden Sie ECharts und Java-Schnittstellen, um statistische Diagrammdesigns für den Mehrkanal-Datenvergleich zu implementieren

Verwenden Sie ECharts und Java-Schnittstellen, um statistische Diagrammdesigns für den Mehrkanal-Datenvergleich zu implementieren.

Mit der kontinuierlichen Entwicklung des Internets sind immer vielfältigere Produkte auf dem Markt entstanden, die häufig über verschiedene Kanäle verkauft werden , wie Online-Kanäle, Offline-Kanäle, Social-Media-Kanäle usw. Daher sind Statistiken über Verkaufsdaten verschiedener Kanäle und der Vergleich der Vertriebsleistung zwischen verschiedenen Kanälen für die Entscheidungsfindung von Unternehmen von großer Bedeutung. In diesem Artikel wird erläutert, wie ECharts und Java-Schnittstellen zur Implementierung des statistischen Diagrammdesigns für den Mehrkanal-Datenvergleich verwendet werden.

1. Vorbereitung

1. Datenbanktabellenentwurf

Zuerst müssen Sie eine Datenbanktabelle entwerfen, um Verkaufsdaten aus verschiedenen Kanälen zu speichern. In diesem Artikel wird die MySQL-Datenbank als Beispiel verwendet, um eine Datenbank mit dem Namen „sales“ und eine Datentabelle mit dem Namen „channel_sales“ darin zu erstellen, wie unten gezeigt:

CREATE TABLE 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=' Verkaufsdaten aus verschiedenen Kanälen‘;

2. Java-Back-End-Code schreiben

Als nächstes müssen Sie Java-Back-End-Code schreiben, um die Verkaufsdaten in der Datenbank auf der Front-End-Seite bereitzustellen. Dieser Artikel verwendet das Spring Boot-Framework und MyBatis für den Datenzugriff. Der Code lautet wie folgt:

(1) ChannelSales-Entitätsklasse erstellen

öffentliche Klasse ChannelSales {

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

// 省略getters和setters方法

}

(2) ChannelSalesMapper-Schnittstelle erstellen

@Mapper
öffentliche Schnittstelle ChannelSalesMapper {

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

}

(3 ) Erstellen Sie die ChannelSalesServiceImpl-Implementierungsklasse

@Service
public class ChannelSalesServiceImpl implementiert ChannelSalesService {

@Autowired
private ChannelSalesMapper channelSalesMapper;

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

}

3. Front-End-Seitendesign

Abschließend muss die Front-End-Seite so gestaltet werden, dass der Vergleich von Verkaufsdaten angezeigt wird aus verschiedenen Kanälen. Dieser Artikel verwendet Echarts.js als Diagrammbibliothek und kombiniert es mit Bootstrap für das Seitenlayout.

2. Implementierungsprozess

1. Verkaufsdaten abfragen

Erstens den Abfragedatumsbereich von der Front-End-Seite abrufen und eine Ajax-Anfrage an das Backend senden, um Verkaufsdaten aus verschiedenen Kanälen zu erhalten. Der Code lautet wie folgt:

// Fragen Sie die Datumsbereichsauswahl ab
$('#date-range').daterangepicker({

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

});

// Hören Sie sich das Klickereignis der Abfrageschaltfläche an
$(' #query- btn').click(function() {

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

});

Nach dem Empfang der Abfrageanforderung im Hintergrund rufen Sie die Methode getSalesData in ChannelSalesService auf, um die Verkaufsdaten aus der Datenbank abzufragen und an den Vordergrund zurückzugeben -Endseite. Der Code lautet wie folgt:

@RestController
@RequestMapping("/api")
public class ApiController {

@Autowired
private ChannelSalesService channelSalesService;

/**
 * 获取不同渠道的销售数据
 * @param startDate 开始日期
 * @param endDate 结束日期
 * @return 查询结果
 */
@GetMapping("/sales-data")
public Result getSalesData(@RequestParam("startDate")
                                   @DateTimeFormat(pattern = "yyyy-MM-dd") Date startDate,
                           @RequestParam("endDate")
                                   @DateTimeFormat(pattern = "yyyy-MM-dd") Date endDate) {
    List<ChannelSales> salesData = channelSalesService.getSalesData(startDate, endDate);
    return Result.success(salesData);
}

}

2. Zeichnen Sie das Diagramm

Sobald die Verkaufsdaten erhalten sind, können Sie ECharts.js verwenden um das entsprechende Statistikdiagramm zu zeichnen. In diesem Artikel werden Kreisdiagramme und Balkendiagramme verwendet, um den Umsatzanteil und das Umsatzranking verschiedener Kanäle anzuzeigen.

(1) Kreisdiagramm

Sehen wir uns zunächst die Zeichnung des Kreisdiagramms an. Das Kreisdiagramm wird verwendet, um den Umsatzanteil verschiedener Kanäle anzuzeigen. Der Code lautet wie folgt:

Funktion drawChart(data) {

rrree

}

(2) Histogramm

Als nächstes folgt die Zeichnung eines Histogramms. Das Histogramm wird verwendet, um das Verkaufsranking verschiedener Kanäle anzuzeigen. Der Code lautet wie folgt:

Funktion drawChart(data) {

// 构造销售数据
var salesData = [];
var totalAmount = 0;
data.forEach(function(item) {
    salesData.push({
        name: item.channelName,
        value: item.salesAmount
    });
    totalAmount += item.salesAmount;
});

// 绘制饼图
var pieChart = echarts.init(document.getElementById('chart-1'));
var pieOption = {
    title: {
        text: '不同渠道销售占比',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
        {
            name: '渠道',
            type: 'pie',
            radius: '60%',
            data: salesData.sort(function(a, b) {
                return a.value - b.value;
            }),
            itemStyle: {
                normal: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                formatter: '{b} ({d}%)'
            }
        }
    ]
};
pieChart.setOption(pieOption);

}

3. Wirkungsdarstellung

Abschließend wird die erzielte Wirkung in der folgenden Abbildung dargestellt:

Abbildung 1 Umsatzanteile verschiedener Kanäle

Abbildung 2 Umsatzrankings verschiedener Kanäle

Aus der Grafik ist intuitiv ersichtlich, dass Online-Kanäle Der größte Anteil am Umsatz entfällt. Dabei gibt es zwar keinen großen Unterschied beim Umsatz zwischen Online- und Offline-Kanälen, der Umsatz über Social-Media-Kanäle ist jedoch relativ gering. Diese Daten helfen Unternehmen, Geschäftsmöglichkeiten über verschiedene Kanäle hinweg zu verstehen und entsprechende Entscheidungen zu treffen.

4. Zusammenfassung

In diesem Artikel wird die Verwendung von ECharts und Java-Schnittstellen zur Implementierung des statistischen Diagrammdesigns für den Mehrkanal-Datenvergleich vorgestellt. Auf diese Weise können nicht nur die Verkaufsdaten verschiedener Kanäle visuell dargestellt werden, sondern es kann Unternehmen auch dabei helfen, den Wettbewerb und die Geschäftsmöglichkeiten zwischen den Kanälen besser zu verstehen, um entsprechende Entscheidungen zu treffen. Die spezifische Implementierung kann flexibel an Ihre eigenen Bedürfnisse angepasst werden, um sich an unterschiedliche Geschäftsszenarien anzupassen.

Das obige ist der detaillierte Inhalt vonVerwenden Sie ECharts und Java-Schnittstellen, um statistische Diagrammdesigns für den Mehrkanal-Datenvergleich zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!