商品销量和销售额实时展示看板

作者:江月迟迟

发表于:2024-12-10

字数统计:1107 字

预计阅读4分钟

介绍

双 11、618 是近些年来兴起的购物节，每到这个时候商品的销售数量和销售额都非常巨大。如此庞大的数据通过表格的形式很难观察其增减趋势，图表能更加直观的显示数据的变化。目前，云课后台已经实时统计了 1 小时平台课程的销售数量和销售额，本题需要使用 echarts 将这些数据用图表的方式显示到前端。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── effect.gif
├── css
│   └── index.css
├── index.html
└── js
    ├── echarts.js
    └── index.js

其中：

• index.html 是主页面。
• index.js 是待完善的 js 文件。
• echarts.js 是 echarts 文件。
• index.css 是 css 样式文件。
• effect.gif 是完成的效果图。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

cd /home/project
wget -q https://labfile.oss.aliyuncs.com/courses/18164/test2.zip
unzip test2.zip && rm test2.zip

在浏览器中预览 index.html 页面，显示如下所示：

目标

请在 js/index.js 文件中补全代码。

最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

具体需求如下：

1. 补全 yAxis 的设置，要求“销售额”（即，配置项 name）的位置（即，配置项 position）在图表的左侧，“销量”（即，配置项 name）的位置（即，配置项 position）在图表的右侧。
2. 补全 renderChart 函数中的代码，正确给 X 轴的时间，以及 Y 轴的销售额和销量赋值。

规定

• 请勿修改 js/index.js 文件外的任何内容。
• 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
• 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

• 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 1623 | 总提交次数: 1725 | 通过率: 94.1%

难度: 简单 标签: 2022, 省模拟赛, Web 前端, ECharts

题解

// 指定图表的配置项和数据
const charData = {
    title: {
        text: '云课课程销量和销售额看板',
        width: 100,
        height: 50,
        textStyle: {
            lineHeight: 50,
        },
        left: 'center',

    },
    grid: {
        top: 80,
    },
    tooltip:{
        show: true,
    },
    xAxis: {
        data: [],
    },
    // TODO：补全 `yAxis` 的设置，要求“销售额”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的左侧，“销量”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的右侧。
    yAxis: [{
        type: 'value',
        name: '销售额',
        position: 'left',
    },
    {
        type: 'value',
        name: '销量',
        position: 'right',
    }],
    series: [
        {
            name: '销售额',
            type: 'line',
            data: [],
            yAxisIndex: 0,
            smooth: true
        },
        {
            name: '销量',
            type: 'bar',
            data: [],
            yAxisIndex: 1,
            smooth: true
        }
    ]
};

// 以下代码为模拟后端服务器返回数据
let sale = 0;
let count = 0;
// 销售额
const saleObj = {};
// 销量
const countObj = {};
let index = 0;
function Ajax() {
    return new Promise((resolve, reject) => {
        let randomNum = Math.random();
        const randomSum = () => (randomNum * 500 + 900);
        const randomCount = () => (randomNum * 50 + 80);
        let i = index++ * 10
        let key = `10:${i == 0 ? "00" : i}`;
        if (index < 7) {
            sale = randomSum();
            Object.assign(saleObj, { [key]: sale.toFixed(2) })
            count = randomCount();
            Object.assign(countObj, { [key]: count.toFixed(2) })
        }

        const respondBody = {
            "code": 200,
            "msg": "success",
            "data": {
                saleObj,
                countObj
            }
        };
        setTimeout(() => {
            resolve(respondBody);
        }, 1000)
    })
}

async function renderChart() {
    const result = await Ajax();
    document.querySelector("#result").innerText = JSON.stringify(result);
    const myChart = echarts.init(document.getElementById('main'));
    // TODO：补全代码，正确给 X 轴的时间，以及 Y 轴的商品的销售额 saleObj 和销量赋值 countObj。

    charData.xAxis.data = [...Object.keys(saleObj)]
    charData.series[0].data = [...Object.values(saleObj)]
    charData.series[1].data = [...Object.values(countObj)]

    myChart.setOption(charData, true);
    document.querySelector("#data").innerText = JSON.stringify(charData);
}
renderChart();
let times = 0;
let timer = setInterval(() => {
    renderChart();
    ++times == 6 && clearInterval(timer);
}, 2000)