<template>
<div>
根据接口,用基础散点图展示每年上架商品数量的变化情况
同时将用于图表展示的数据结构在浏览器的console中进行打印输出
</div>
<div id="main"></div>
</template>
<script>
import echarts from '../assets/echarts.min';
import axios from '../assets/axios';
export default {
mounted() {
var myChart = echarts.init(document.getElementById('main'));
axios.post('/api/selectGoodsInfo').then(response => {
var data = response.data;
// 按年份汇总上架商品数量
var yearTotal = data.reduce((acc, item) => {
var year = item.year;
if (!acc[year]) {
acc[year] = [];
} //!acc[year]:这是一个条件判断,检查 acc 对象中是否已经存在 year 这个键。'!' 是逻辑非操作符,当 acc[year] 不存在(或者为假值)时,条件成立。
acc[year].push(1); // 每上架一个商品加一个点
return acc;
}, {});
// 将汇总数据转换为数组形式
var scatterData = Object.entries(yearTotal)
.sort((a, b) => a[0] - b[0])
.map(item => ({ year: item[0], count: item[1].length })); //将排序后的数组映射为包含'year'和'count'属性的对象数组,其中year表示年份,count表示对应年份上架商品的数量。 'item[1].length'表示每个年份商品数组的长度,即上架商品数量。
// 打印处理后的数据结构
console.log(scatterData);
// 设置图表选项
var option = {
title: {
text: '每年上架商品数量的变化情况',
left: 'center'
},
xAxis: {
type: 'category',
name: '年份',
data: scatterData.map(item => item.year)
},
yAxis: {
type: 'value',
name: '商品数量'
},
series: [{
symbolSize: 10,
data: scatterData.map(item => ({ value: [item.year, item.count] })),
type: 'scatter'
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
});
}
};
</script>
<style>
#main {
width: 100%;
height: 500px;
}
</style>
book3Task3 用基础散点图展示每年上架商品数量的变化情况
于 2024-01-13 22:14:11 首次发布