最近在毕设的过程中，老师要求我们专业的毕业设计要实现与数据分析有关的功能，回顾之前和数据分析有关的课程，觉得能用到的也就是数据可视化，但是怎么把可视化图表放入项目中，网上找了一些项目视频，理解了过程，使用springboot+vue框架的大部分都是使用echarts集成，所以我尝试写下这篇笔记，记录我学习的笔记以及具体的实操过程。
echarts社区链接：Examples - Apache ECharts
1、echarts安装与使用
npm install echarts --save打开终端，在vue目录底下进行安装。
安装后如下所示：
打开package.json文件查看echarts已安装：
安装成功后在你需要使用的页面引入echarts:
import * as echarts from 'echarts';2、设计绘制图形
进入echarts网站，找到自己需要绘制的图表，根据自己的需求对代码进行编辑，来设计图表的样式，里面的数据随意，因为之后会替换成动态的数据，如下图所示：
import * as echarts from 'echarts';
let chartPie = document.getElementById('pie');//页面上要渲染的位置
let pieChart = echarts.init(chartPie );//echarts的初始化
let option;
option = {
title: {
text: '商品类别统计（饼图）', //主标题
subtext: '统计维度：商品分类', //副标题
left: 'center' //标题的位置，这里设置为 'center'，表示标题居中显示。
},
tooltip: {
trigger: 'item' //指定 tooltip 的触发方式，这里设置为 'item'，表示当用户悬停在某个数据项上时显示 tooltip。
},
legend: {
orient: 'vertical', //表示图例垂直排列。
left: 'left' //图例的位置
},
color: [
'#f9f4dc',
'#f7da94',
'#619ac3',
'#ac1f18',
'#e2d849',
'#add5a2',
'#d276a3',
'#ce5777',
'#FFB533',
'#126e82'
],
series: [
//图表的系列数据
{
name: '商品分类', //系列的名称，这里为 '商品分类'，用于标识该系列。
type: 'pie', //图表类型，这里设置为 'pie'，表示这是一个饼图。
radius: '50%', //饼图的半径，这里设置为 '50%'，表示饼图占据图表的50%。
data: [
{ value: 1048, name: '民间文学' },
{ value: 735, name: '传统音乐' },
{ value: 580, name: '传统舞蹈' },
{ value: 484, name: '传统戏剧' },
{ value: 300, name: '曲艺' },
{ value: 1048, name: '传统体育' },
{ value: 735, name: '传统美术' },
{ value: 580, name: '传统技艺' },
{ value: 484, name: '传统医药' },
{ value: 300, name: '民俗 ' }
],
emphasis: {
//当用户悬停在某个数据项上时的样式设置。
itemStyle: {
//设置高亮时的样式。
shadowBlur: 10, //阴影模糊度。
shadowOffsetX: 0, //阴影的水平偏移量。
shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影的颜色。
}
}
}
]
};
option && myChart.setOption(option);
分析饼图所需要的数据，是一个list列表，里面包含了很多Map类型的数据。饼图只需要替换其中的data数据即可。
总结饼图的绘制，只需要在后台写一个接口，去查询需要统计模块的所有数据，然后在后台的处理逻辑里根据统计的维度按照data所需要的数据结构封装在一个list里并返回前端赋值给data。
3、测试图形效果
①在需要绘制的页面导入echarts:
<script>
import * as echarts from 'echarts';
</script>
②添加一个区域来绘制饼图
<div style="width: 50%">
<div id="bie" style="width: 100%;height: 400px"></div>
</div>③定义绘制饼图函数initPie()
methods:{
initPie() {
let chartDomPie = document.getElementById('pie');
let PieChart = echarts.init(chartDomPie);
let option;
option = {
title: {
text: '商品类别统计（饼图）', //主标题
subtext: '统计维度：商品分类', //副标题
left: 'center' //标题的位置，这里设置为 'center'，表示标题居中显示。
},
tooltip: {
trigger: 'item' //指定 tooltip 的触发方式，这里设置为 'item'，表示当用户悬停在某个数据项上时显示 tooltip。
},
legend: {
orient: 'vertical', //表示图例垂直排列。
left: 'left' //图例的位置
},
color: [
'#f9f4dc',
'#f7da94',
'#619ac3',
'#ac1f18',
'#e2d849',
'#add5a2',
'#d276a3',
'#ce5777',
'#FFB533',
'#126e82'
],
series: [
//图表的系列数据
{
name: '商品分类', //系列的名称，这里为 '商品分类'，用于标识该系列。
type: 'pie', //图表类型，这里设置为 'pie'，表示这是一个饼图。
radius: '50%', //饼图的半径，这里设置为 '50%'，表示饼图占据图表的50%。
data: [
{value: 1048, name: '民间文学'},
{value: 735, name: '传统音乐'},
{value: 580, name: '传统舞蹈'},
{value: 484, name: '传统戏剧'},
{value: 300, name: '曲艺'},
{value: 1048, name: '传统体育'},
{value: 735, name: '传统美术'},
{value: 580, name: '传统技艺'},
{value: 484, name: '传统医药'},
{value: 300, name: '民俗 '}
],
emphasis: {
//当用户悬停在某个数据项上时的样式设置。
itemStyle: {
//设置高亮时的样式。
shadowBlur: 10, //阴影模糊度。
shadowOffsetX: 0, //阴影的水平偏移量。
shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影的颜色。
}
}
}
]
};
option && PieChart.setOption(option);
}
}④调用该函数
mounted() {
this.initPie();
},⑤查看测试图形绘制
打开刚刚添加的页面可以查看到刚刚绘制的图表
到目前为止我们已经可以将图形绘制在前端页面上，但是这个数据是静态的，接下来需要写一个接口将数据传到前台。
4、添加数据接口获取动态数据
在对应的goodsController.java文件中添加接口/echarts/pie
@GetMapping("/echarts/pie")
public Result pie(){
//查询出所有商品
List<Goods> list = goodsService.findAll();
return Result.success();
}在goodsService.java中创建findAll()方法
public List<Goods> findAll() {
return goodsMapper.findAll();
}在goodsMapper.java添加查询语句
@Select("select goods.*,type.name as typeName from goods left join type on goods.type_id = type.id")
List<Goods> findAll();到此为止，goodsController.java就可以获得查询的数据了，接下来我们需要对查询的数据进行处理，转换成饼图所需的格式。需要做的统计是将所有商品按照类别进行分组，变成key:value的形式。
首先将查询到的list的数据变成stream流打散，然后将stream里typeName为空的数据进行过滤，过滤完之后转换成集合list，就在这个集合里处理数据，将typeName作为key，首先使用
Collectors.groupingBy进行分组，分组里面的key是Goods里面已经定义好的typeName,value则需要对里面的数据进行统计Collectors.counting，到此为止数据处理的部分已经完成。
接着是封装好处理好的数据返回给前端，前端接收的格式为List<Map<String,Object>>，首先检查一遍处理好的数据是否为空，然后使用for循环将数据封装成key,value的格式，最后把每一条数据集合起来返回前端。完整代码如下：
@GetMapping("/echarts/pie")
public Result pie(){
//查询出所有商品
List<Goods> list = goodsService.findAll();
//将获取的数据转换成key:value形式
Map<String, Long> collect = list.stream().filter(x -> ObjectUtil.isNotEmpty(x.getTypeName())).collect(Collectors.groupingBy(Goods::getTypeName, Collectors.counting()));
//最后返回给前端的数据结构
List<Map<String,Object>> mapList = new ArrayList<>();
if (CollectionUtil.isNotEmpty(collect)){
for (String key : collect.keySet()){
Map<String,Object> map = new HashMap<>();
map.put("name",key);
map.put("value",collect.get(key));
mapList.add(map);
}
}
return Result.success(mapList);
}后台改完记得重启。
5、前端页面添加动态数据
定义initEcharts()进行数据渲染：
mounted() {
this.initEcharts();
this.initPie();
}, methods:{
initEcharts(){
request.get('/goods/echarts/pie').then(res => {
if (res.code === '200'){
//开始去渲染数据
this.initPie(res.data)
}else {
this.$message.error(res.msg)
}
})
}
}给initPie()定义一个参数data用来传数据，将里面的静态数据使用data进行替代，修改如下：
initPie(data) {
let chartDomPie = document.getElementById('pie');
let PieChart = echarts.init(chartDomPie);
let option;
option = {
title: {
text: '商品类别统计（饼图）', //主标题
subtext: '统计维度：商品分类', //副标题
left: 'center' //标题的位置，这里设置为 'center'，表示标题居中显示。
},
tooltip: {
trigger: 'item' //指定 tooltip 的触发方式，这里设置为 'item'，表示当用户悬停在某个数据项上时显示 tooltip。
},
legend: {
orient: 'vertical', //表示图例垂直排列。
left: 'left' //图例的位置
},
color: [
'#f9f4dc',
'#f7da94',
'#619ac3',
'#ac1f18',
'#e2d849',
'#add5a2',
'#d276a3',
'#ce5777',
'#FFB533',
'#126e82'
],
series: [
//图表的系列数据
{
name: '商品分类', //系列的名称，这里为 '商品分类'，用于标识该系列。
type: 'pie', //图表类型，这里设置为 'pie'，表示这是一个饼图。
radius: '50%', //饼图的半径，这里设置为 '50%'，表示饼图占据图表的50%。
data: data,
emphasis: {
//当用户悬停在某个数据项上时的样式设置。
itemStyle: {
//设置高亮时的样式。
shadowBlur: 10, //阴影模糊度。
shadowOffsetX: 0, //阴影的水平偏移量。
shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影的颜色。
}
}
}
]
};
option && PieChart.setOption(option);
}
},5、前端查看图表
可以看到前台的图表内容已经变成了我自己数据库里的数据，之后如果新增类别商品，这张图也会根据数据库的信息进行动态变化。
总结，使用echarts绘制可视化图表，先确定绘制的图形是什么，然后复制echarts的代码进行测试，测试完后分析该图形需要哪些数据，然后在后台进行查询获取数据，获取数据后对数据进行处理，处理完后封装打包成饼图所需的结构形式传到前台，前台调用后台写好的接口，获取数据进行绘制。这个阶段的完成给了我莫大的信心，接下来还会根据我的需求进行其他的数据分析。
扫一扫
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
