商品销量和销售额实时展示看板
介绍
双 11、618 是近些年来兴起的购物节，每到这个时候商品的销售数量和销售额都非常巨大。如此庞大的数据通过表格的形式很难观察其增减趋势，图表能更加直观的显示数据的变化。目前，云课后台已经实时统计了 1 小时平台课程的销售数量和销售额，本题需要使用 echarts 将这些数据用图表的方式显示到前端。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1
2
3
4
5
6
7
| ├── 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 是完成的效果图。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。
1
2
3
| 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 图片）。
具体需求如下：
- 补全
yAxis 的设置，要求“销售额”（即，配置项 name）的位置（即，配置项 position）在图表的左侧，“销量”（即，配置项 name）的位置（即，配置项 position）在图表的右侧。
- 补全
renderChart 函数中的代码，正确给 X 轴的时间，以及 Y 轴的销售额和销量赋值。
规定
- 请勿修改
js/index.js 文件外的任何内容。
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
- 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。
判分标准
总通过次数: 1623 | 总提交次数: 1725 | 通过率: 94.1%
难度: 简单 标签: 2022, 省模拟赛, Web 前端, ECharts
题解
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
const charData = {
title: {
text: '云课课程销量和销售额看板',
width: 100,
height: 50,
textStyle: {
lineHeight: 50,
},
left: 'center',
},
grid: {
top: 80,
},
tooltip:{
show: true,
},
xAxis: {
data: [],
},
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'));
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)
|
