Utilisez les interfaces ECharts et Java pour implémenter la conception de graphiques statistiques pour la comparaison de données multicanaux

Utilisez les interfaces ECharts et Java pour mettre en œuvre la conception de graphiques statistiques pour la comparaison de données multicanaux

Avec le développement continu d'Internet, des produits de plus en plus diversifiés ont émergé sur le marché, et ces produits sont souvent vendus via différents canaux , tels que les canaux en ligne, les canaux hors ligne, les canaux de médias sociaux, etc. Par conséquent, les statistiques des données de vente de différents canaux et la comparaison des performances de vente entre différents canaux revêtent une grande importance pour la prise de décision de l'entreprise. Cet article explique comment utiliser les interfaces ECharts et Java pour implémenter la conception de graphiques statistiques pour la comparaison de données multicanaux.

1. Préparation

1. Conception d'une table de base de données

Tout d'abord, vous devez concevoir une table de base de données pour stocker les données de vente de différents canaux. Cet article prend la base de données MySQL comme exemple pour créer une base de données nommée "sales" et une table de données nommée "channel_sales", comme indiqué ci-dessous :

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=' Données de vente de différents canaux ;

2. Écriture de code back-end Java

Ensuite, vous devez écrire du code back-end Java pour fournir les données de vente de la base de données à la page frontale. Cet article utilise le framework Spring Boot et utilise MyBatis pour l'accès aux données. Le code est le suivant :

(1) Créer une classe d'entité ChannelSales

classe publique ChannelSales {

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

// 省略getters和setters方法

}

(2) Créer une interface ChannelSalesMapper

@Mapper
interface publique ChannelSalesMapper {

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

}

(3 ) Créez la classe d'implémentation ChannelSalesServiceImpl

@Service
classe publique ChannelSalesServiceImpl implémente 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. Conception de la page frontale

Enfin, la page frontale doit être conçue pour afficher la comparaison des données de vente provenant de différents canaux. Cet article utilise Echarts.js comme bibliothèque de graphiques et le combine avec Bootstrap pour la mise en page.

2. Processus de mise en œuvre

1. Requête des données de vente

Tout d'abord, obtenez la plage de dates de requête à partir de la page frontale et envoyez une requête Ajax au backend pour obtenir les données de vente de différents canaux. Le code est le suivant :

// Interrogez le sélecteur de plage de dates
$('#date-range').daterangepicker({

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

});

// Écoutez l'événement de clic sur le bouton de requête
$(' #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);
    }
});

});

Après avoir reçu la demande de requête en arrière-plan, appelez la méthode getSalesData dans ChannelSalesService pour interroger les données de vente de la base de données et les renvoyer au premier plan -fin de page. Le code est le suivant :

@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. Dessiner le graphique

Une fois les données de ventes obtenues, vous pouvez utiliser ECharts.js pour dessiner le graphique statistique correspondant. Cet article utilise des diagrammes circulaires et des diagrammes à barres pour afficher la proportion des ventes et le classement des ventes des différents canaux.

(1) Diagramme circulaire

Regardons d'abord le dessin du diagramme circulaire. Le diagramme circulaire est utilisé pour afficher la proportion de ventes des différents canaux. Le code est le suivant :

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

.

}

(2) Histogramme

Vient ensuite le dessin d'un histogramme. L'histogramme permet d'afficher le classement des ventes des différents canaux. Le code est le suivant :

function drawChart(data) {

// 构造销售数据
var salesData = [];
data.forEach(function(item) {
    salesData.push({
        name: item.channelName,
        value: item.salesAmount
    });
});
salesData.sort(function(a, b) {
    return b.value - a.value;
});

// 绘制柱状图
var barChart = echarts.init(document.getElementById('chart-2'));
var barOption = {
    title: {
        text: '不同渠道销售排名',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: '{b}: {c} 元'
    },
    xAxis: {
        type: 'category',
        data: salesData.map(function(item) {
            return item.name;
        }),
        axisLabel: {
            interval: 0,
            rotate: 45
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '销售额',
            type: 'bar',
            data: salesData.map(function(item) {
                return item.value;
            }),
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = [
                            '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae',
                            '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570'
                        ];
                        return colorList[params.dataIndex % colorList.length];
                    }
                }
            }
        }
    ]
};
barChart.setOption(barOption);

}

.

3. Affichage de l'effet

Enfin, l'effet obtenu est illustré dans la figure ci-dessous :

Figure 1 Proportions des ventes des différents canaux

Figure 2 Classement des ventes des différents canaux

Le graphique montre intuitivement que les canaux en ligne représentent la plus grande proportion des ventes. Dans le même temps, il n'y a pas beaucoup de différence dans les ventes entre les canaux en ligne et hors ligne, mais les ventes via les réseaux sociaux sont relativement faibles. Ces données aident les entreprises à comprendre les opportunités commerciales sur différents canaux et à prendre les décisions appropriées.

4. Résumé

Cet article présente comment utiliser les interfaces ECharts et Java pour implémenter la conception de graphiques statistiques pour la comparaison de données multicanaux. De cette manière, non seulement les données de vente des différents canaux peuvent être affichées visuellement, mais elles peuvent également aider les entreprises à mieux comprendre la concurrence et les opportunités commerciales entre les canaux, afin de prendre les décisions correspondantes. La mise en œuvre spécifique peut être ajustée de manière flexible en fonction de vos propres besoins pour s'adapter à différents scénarios commerciaux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!