题目案例

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

介绍

双 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 分。

代码实现

// 指定图表的配置项和数据
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: '',
    },
    {
        type: 'value',
        name: '',
        position: '',
    }],
    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();
    console.log(result)
    
    document.querySelector("#result").innerText = JSON.stringify(result);
    const myChart = echarts.init(document.getElementById('main'));
    // TODO：补全代码，正确给 X 轴的时间，以及 Y 轴的商品的销售额 saleObj 和销量赋值 countObj。
    
    // Object.keys(result.data.countObj)
    charData.xAxis.data=Object.keys(result.data.countObj)
    charData.yAxis[0].name="销售额"
    charData.yAxis[1].name="销量"
    charData.series[0].data=Object.values(result.data.saleObj)
    charData.series[1].data=Object.values(result.data.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)

Object.keys() 是 JavaScript 中用于获取对象自身可枚举属性名称的方法。虽然这个方法看似简单，但它在处理对象属性和操作数据时非常重要。下面我将详细解释 Object.keys() 的作用、语法和用法，以及它在实际编程中的应用。

1.什么是 Object.keys()?
Object.keys() 是一个用于返回一个给定对象自身可枚举属性的名称的方法，返回的是一个由属性名称组成的数组。这个方法并不会列出原型链上的属性，它只会返回对象自身的属性名称。

2.语法
Object.keys() 的语法非常简单：Object.keys(obj)
1.参数
obj： 要获取属性名称的对象。2.返回值
一个由给定对象自身可枚举的字符串键属性键组成的数组。

3.用法示例
如何使用 Object.keys()

4.应用场景
1.迭代对象属性
Object.keys() 可以用于迭代对象的属性，进行各种操作，比如计算属性的数量或者筛选特定类型的属性。

// 简单数组
const arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // ['0', '1', '2']

// 类数组对象
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.keys(obj)); // ['0', '1', '2']

// 键的顺序随机的类数组对象
const anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.keys(anObj)); // ['2', '7', '100']

// getFoo 是一个不可枚举的属性
const myObj = Object.create(
{},
{
getFoo: {
value() {
return this.foo;
},
},
},
);
myObj.foo = 1;
console.log(Object.keys(myObj)); // ['foo']
const person = {
name: 'Alice',
age: 30,
email: 'alice@example.com'
};

const propertyCount = Object.keys(person).length;
console.log(propertyCount); // Output: 3

2.过滤属性
你可以使用 Object.keys() 结合 Array 的 filter 方法来过滤对象的特定属性。

3.遍历和映射属性
通过 Object.keys()，你可以遍历对象的属性，并进行操作或者映射。
5.注意事项
Object.keys() 返回的属性名称是一个数组，属性的顺序与添加到对象中的顺序一致，但在一些 JavaScript 引擎中可能不一致。
它只返回对象自身可枚举的属性名称，不包括继承的属性名称。
6.总结
Object.keys() 是 JavaScript 中一个简单却强大的方法，它允许你获取对象的属性名称，并在实际编程中有着广泛的应用。通过该方法，你可以轻松地迭代对象属性、计算属性的数量、过滤特定类型的属性或者对属性进行遍历和映射。这使得它成为 JavaScript 开发中不可或缺的一部分。

const person = {
name: 'Bob',
age: 25,
email: 'bob@example.com',
isAdmin: true
};

const nonAdminKeys = Object.keys(person).filter(key => key !== 'isAdmin');
console.log(nonAdminKeys); // Output: ['name', 'age', 'email']