使用 ECharts 实现菜品统计和销量统计

菜品统计实现

菜品统计通常用于展示不同菜品的销售数量或销售额占比，适合使用饼图或环形图。

饼图实现菜品占比统计

css 复制代码

    <div id="dishChart"></div>

        // 初始化图表
        var dishChart = echarts.init(document.getElementById('dishChart'));
        
        // 模拟数据 - 实际应用中应从后端API获取
        var dishData = [            { name: '红烧肉', value: 156 },            { name: '清蒸鱼', value: 98 },            { name: '宫保鸡丁', value: 120 },            { name: '麻婆豆腐', value: 85 },            { name: '蒜蓉西兰花', value: 65 },            { name: '酸辣汤', value: 72 }        ];
        
        // 配置项
        var option = {
            title: {
                text: '菜品销售占比统计',
                subtext: '近一周数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: dishData.map(item => item.name)
            },
            series: [
                {
                    name: '销售数量',
                    type: 'pie',
                    radius: '50%',
                    data: dishData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        formatter: '{b}: {c} ({d}%)'
                    }
                }
            ]
        };
        
        // 使用配置项显示图表
        dishChart.setOption(option);
        
        // 响应式调整
        window.addEventListener('resize', function() {
            dishChart.resize();
        });

销量统计实现

销量统计通常需要展示时间趋势，适合使用折线图或柱状图。

柱状图实现日销量统计

css 复制代码

    <div id="salesChart"></div>

        // 初始化图表
        var salesChart = echarts.init(document.getElementById('salesChart'));
        
        // 模拟数据 - 实际应用中应从后端API获取
        var days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        var salesData = [125, 132, 101, 134, 190, 230, 210];
        var popularDish = ['红烧肉', '清蒸鱼', '宫保鸡丁', '红烧肉', '麻婆豆腐', '清蒸鱼', '红烧肉'];
        
        // 配置项
        var option = {
            title: {
                text: '近一周每日销量统计',
                subtext: '数据来源：餐厅POS系统',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function(params) {
                    return `日期: ${params[0].name}<br/>
                            销量: ${params[0].value}份<br/>
                            最受欢迎菜品: ${popularDish[params[0].dataIndex]}`;
                }
            },
            xAxis: {
                type: 'category',
                data: days,
                axisLabel: {
                    interval: 0,
                    rotate: 0
                }
            },
            yAxis: {
                type: 'value',
                name: '销量(份)'
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: salesData,
                    itemStyle: {
                        color: function(params) {
                            // 周末用不同颜色显示
                            return params.dataIndex >= 5 ? '#c23531' : '#2f4554';
                        }
                    },
                    label: {
                        show: true,
                        position: 'top'
                    }
                }
            ],
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ]
        };
        
        // 使用配置项显示图表
        salesChart.setOption(option);
        
        // 响应式调整
        window.addEventListener('resize', function() {
            salesChart.resize();
        });