使用echarts制作点餐菜品排行和用餐高峰期排行

ECharts是一款强大的JavaScript图表库，可以用于创建各种复杂的图表，包括折线图、柱状图、饼图等。要使用ECharts制作点餐菜品排行和用餐高峰期排行，你可以按照以下步骤操作：

1. **准备数据**：
- 点餐菜品排行的数据应该包含菜品名称和对应的点单次数。
- 用餐高峰期的数据需要包括时间段（如早餐、午餐、晚餐）以及对应的人流量或订单量。

2. **初始化图表**：

   var myChart = echarts.init(document.getElementById('main')); // 获取图表元素

3. **配置菜品排行柱状图**：

   var option = {
       title: {text: '菜品点单排行'},
       xAxis: {data: ['菜品A', '菜品B', '菜品C', ...]}, // 菜品名称列表
       yAxis: {name: '点单次数'},
       series: [{
           name: '排行',
           type: 'bar',
           data: [菜品A销量, 菜品B销量, ...]
       }]
   };

4. **配置用餐高峰期折线图**：

   option = option.concat({
       title: {text: '用餐高峰期分布'},
       xAxis: {type: 'category', data: ['早餐', '午餐', '晚餐']},
       yAxis: {name: '人流量/订单量'},
       series: [{
           name: '高峰期',
           type: 'line', // 或者'region'（区域图，适合展示一段时间内的分布）
           data: [[高峰时段1值, 高峰时段2值, 高峰时段3值], ...]
       }]
   });

5. **渲染图表**：

   myChart.setOption(option);

6. **动态更新数据**（如果有实时数据流）：
如果你需要实时更新这两个排行，可以定期或根据事件触发更新`option`中的数据部分。