1.饼图
前端使用vue，后端使用SpringBoot
<template><div><div class="card" style="padding: 15px">数据可视化分析：图书类型销量</div><div style="display: flex; margin: 10px 0"><div style="display: flex; margin: 10px 0"><div style="width: 1200px;height: 600px;" class="card" id="goodsPie"></div></div></div></div>
</template><script>
import * as echarts from "echarts";let pieGoodsOptions = {title: {text: '', // 主标题subtext: '', // 副标题left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {top: '8%',type: 'scroll',orient: 'vertical',left: 'left',pageIconColor: 'red', // 激活的分页按钮颜色pageIconInactiveColor: 'yellow', // 没激活的分页按钮颜色},series: [{name: '', // 鼠标移上去显示内容type: 'pie',radius: '50%',center: ['50%', '60%'],data: [{value: 0, name: ''}, // 示例数据：name表示维度，value表示对应的值]}]
}export default {name: "Visualization",data() {return {}},created() {this.loadGoodsPie();},methods: {loadGoodsPie(){this.$request.get('/goods/getPie').then(res => {if (res.code === '200') {let chartDom = document.getElementById('goodsPie');let myChart = echarts.init(chartDom);pieGoodsOptions.title.text = res.data.textpieGoodsOptions.title.subtext = res.data.subTextpieGoodsOptions.series[0].name = res.data.namepieGoodsOptions.series[0].data = res.data.datamyChart.setOption(pieGoodsOptions);} else {this.$message.error(res.msg)}})},}
}
</script>/*** 渲染图书类型销量饼状图*/
@GetMapping("/getPie")
public Result getPie() {Map<String, Object> resultMap = new HashMap<>();List<Map<String, Object>> list = new ArrayList<>();// 获得商品分类名称为key，该分类销量为value的mapList<Goods> goodsList = goodsService.selectAll(new Goods());Map<String, Integer> collect = goodsList.stream().filter(x -> ObjectUtil.isNotEmpty(x.getTypeId())).collect(Collectors.groupingBy(Goods::getTypeName, Collectors.reducing(0, Goods::getCount, Integer::sum)));for (String key : collect.keySet()) {Map<String, Object> map = new HashMap<>();map.put("name", key);map.put("value", collect.get(key));list.add(map);}resultMap.put("text", "图书类型销售量统计饼图");resultMap.put("subText", "统计维度：图书类型");resultMap.put("name", "占比数据");resultMap.put("data", list);return Result.success(resultMap);
}1.柱状图
前端使用vue，后端使用SpringBoot
<template><div><div class="card" style="padding: 15px">数据可视化分析：店铺销量</div><div style="display: flex; margin: 10px 0"><!-- 后台主页左上部分：公告 --><div style="display: flex; margin: 10px 0"><div style="width: 600px;height: 600px;" class="card" id="businessBar"></div></div></div></div>
</template><script>
import * as echarts from "echarts";let barBusinessOptions = {title: {text: '', // 主标题subtext: '', // 副标题left: 'center'},xAxis: {axisLabel:{interval: 0,//rotate:30,formatter: function (name) {return (name.length > 8 ? (name.slice(0,8)+"...") : name );},},type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 示例数据：统计的维度（横坐标）},yAxis: {type: 'value'},tooltip: {trigger: 'item'},series: [{data: [120, 200, 150, 80, 70, 110, 130], // 示例数据：横坐标维度对应的值（纵坐标）type: 'bar',itemStyle: {normal: {color:function(){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}},},}]
}export default {name: "Visualization2",data() {return {}},created() {this.loadBusinessBar();},methods: {loadBusinessBar(){this.$request.get('/goods/getBar').then(res => {if (res.code === '200') {let chartDom = document.getElementById('businessBar');let myChart = echarts.init(chartDom);barBusinessOptions.title.text = res.data.textbarBusinessOptions.title.subtext = res.data.subTextbarBusinessOptions.xAxis.data = res.data.xAxisbarBusinessOptions.series[0].data = res.data.yAxismyChart.setOption(barBusinessOptions);} else {this.$message.error(res.msg)}})},}
}
</script>/*** 渲染店铺销量柱状图*/
@GetMapping("/getBar")
public Result getBar() {Map<String, Object> resultMap = new HashMap<>(); // 存取最后返回的数据Map<String, Object> res = new HashMap<>(); // 暂存销量前5的数据List<String> xList = new ArrayList<>(); // 店铺名称List<Integer> yList = new ArrayList<>(); // 店铺总销量// 获得店铺名称为key，该店铺全部销量求和为value的mapList<Goods> goodsList = goodsService.selectAll(new Goods());Map<String, Integer> collect = goodsList.stream().filter(x -> ObjectUtil.isNotEmpty(x.getBusinessId())).collect(Collectors.groupingBy(Goods::getBusinessName, Collectors.reducing(0, Goods::getCount, Integer::sum)));collect.entrySet().stream()// 排序.sorted((p1, p2) -> p2.getValue().compareTo(p1.getValue()))// 截取前limitSize个.limit(5).collect(Collectors.toList()).forEach(ele -> res.put(ele.getKey(), ele.getValue()));for (String key : res.keySet()) {xList.add(key);yList.add((Integer) res.get(key));}resultMap.put("text", "店铺销售量前五统计柱状图");resultMap.put("subText", "统计维度：店铺名称");resultMap.put("xAxis", xList);resultMap.put("yAxis", yList);return Result.success(resultMap);
}可以点个免费的赞吗！！！
)
