SpringBoot和Vue整合ECharts
一、Vue安装ECharts
npm i echarts -S
二、Vue整合ECharts
其实这个很简单
首先在vue中引入ECharts
2.然后我们直接去ECharts官网使用一些图形的代码，放到Home.vue中，所以Home.vue中的所有内容直接改成如下所示
例如这个折线图：
这需要在
<!--最外层要用一个div包裹这-->
<template>
<div>
<el-col :span="12">
<div id="main" style="width: 500px;height: 400px"></div>
</el-col>
</div>
</template>
然后把这些代码复制到
<script></script>中就行了，注意这写复制来的代码要用
mounted() {//页面元素渲染之后在触发
}
这个包裹。
例如
<script>
// 引入Echarts
import * as echarts from 'echarts'
export default {
name: "Home",
data() {
return {}
},
// 页面元素渲染之后再触发
mounted() {
// 柱状折线图
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar'
}
]
};
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.setOption(option);
}
</script>
<style scoped>
</style>
然后完整代码就是这样的
<template>
<div>
<el-col :span="12">
<div id="main" style="width: 500px;height: 400px"></div>
</el-col>
<el-col :span="12">
<div id="pie" style="width: 500px;height: 400px"></div>
</el-col>
</div>
</template>
<script>
// 引入Echarts
import * as echarts from 'echarts'
export default {
name: "Home",
data() {
return {}
},
// 页面元素渲染之后再触发
mounted() {
// 柱状折线图
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar'
}
]
};
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.setOption(option);
// 饼图
var pieOption = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct'},
{value: 580, name: 'Email'},
{value: 484, name: 'Union Ads'},
{value: 300, name: 'Video Ads'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var pieDom = document.getElementById('pie');
var pieChart = echarts.init(pieDom);
pieChart.setOption(pieOption);
}
}
</script>
<style scoped>
</style>
运行出来是这样的：
三、后台实现ECharts数据传输接口
在网站上复制的数据是写死的，这样不适合我们网站，为了动态展示数据，要从后台获取数据，首先在此目录下新建EchartsController.java
然后看这个例子：
后端先写一个接口：
@GetMapping("/example")
public Result get() {
Map<String, Object> map = new HashMap<>();
map.put("x", CollUtil.newArrayList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"));
map.put("y", CollUtil.newArrayList(150, 230, 224, 218, 135, 147, 260));//HuTool_集合工具中的一个可以直接弄成list
return Result.success(map);
}
然后就是在前端填空了
在来看这个饼图，
然后这饼图的后端是调用了数据库：
其中这个quarterEnum是计算某个日期属于那个季度的
然后总的代码就是可以研究一下
<template>
<div>
<!-- gutter是这四个的间距，margin-bottom是距离下面的间距-->
<el-row :gutter="10" style="margin-bottom: 60px">
<el-col :span="6">
<el-card style="color: #409EFF">
<div><i class="el-icon-user-solid" /> 用户总数</div>
<div style="padding: 10px 0; text-align: center; font-weight: bold">
100
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card style="color: #F56C6C">
<div><i class="el-icon-money" /> 销售总量</div>
<div style="padding: 10px 0; text-align: center; font-weight: bold">
￥ 1000000
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card style="color: #67C23A">
<div><i class="el-icon-bank-card" /> 收益总额</div>
<div style="padding: 10px 0; text-align: center; font-weight: bold">
￥ 300000
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card style="color: #E6A23C">
<div><i class="el-icon-s-shop" /> 门店总数</div>
<div style="padding: 10px 0; text-align: center; font-weight: bold">
20
</div>
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div id="main" style="width: 500px; height: 450px"></div><!--最外层要用一个div包裹这-->
</el-col>
<el-col :span="12">
<div id="pie" style="width: 500px; height: 400px"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "Home",
data(){
return {
}
},
mounted() {//页面元素渲染之后在触发
//柱状图加折线图
var option = {
title: {
text: '各季度会员数量统计',
subtext: '趋势图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
xAxis: {
type: 'category',
//下面的数据要从后台穿过来
//data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data:["第一季度", "第二季度", "第三季度", "第四季度"]
},
yAxis: {
type: 'value'
},
series: [
{//折线图
//下面的数据要从后台穿过来
//data: [150, 230, 224, 218, 135, 147, 260],
name:"星巴克",
data:[],
type: 'bar'
},
{//柱状图
//下面的数据要从后台穿过来
//data: [150, 230, 224, 218, 135, 147, 260],
name:"星巴克",
data:[],
type: 'line'
},
{//折线图
//下面的数据要从后台穿过来
//data: [150, 230, 224, 218, 135, 147, 260],
name:"瑞幸咖啡",
data:[],
type: 'bar'
},
{//柱状图
//下面的数据要从后台穿过来
//data: [150, 230, 224, 218, 135, 147, 260],
name:"瑞幸咖啡",
data:[],
type: 'line'
}
]
};
//饼图
var pieOption = {
title: {
text: '各季度会员数量统计',
subtext: '比例图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
type: 'pie',
radius: '50%',
label: { //饼图图形上的文本标签
normal: {
show: true,
position: 'inner', //标签的位置
textStyle: {
fontWeight: 300,
fontSize: 14, //文字的字体大小
color: "#fff"
},
formatter: '{d}%'//饼图上的比例
},
},
data: [],//填空
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//柱状图加折线图
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
//饼图
var pieDom = document.getElementById('pie');
var pieChart = echarts.init(pieDom);
this.request.get("/echarts/members").then(res=>{
//填空
// option.xAxis.data=res.data.x
option.series[0].data=res.data
option.series[1].data=res.data
option.series[2].data=[3,4,5,6]
option.series[3].data=[3,4,5,6]
//数据准备完成之后在set
myChart.setOption(option)
//饼图填空
pieOption.series[0].data = [
{name: "第一季度", value: res.data[0]},
{name: "第二季度", value: res.data[1]},
{name: "第三季度", value: res.data[2]},
{name: "第四季度", value: res.data[3]},
]
pieChart.setOption(pieOption)
})
}
}
</script>
<style scoped>
</style>
package com.xxxx.demo.controller; import cn.hutool.core.collection.CollUtil; import cn.hutool.core.date.DateUtil; import cn.hutool.core.date.Quarter; import com.xxxx.demo.common.Result; import com.xxxx.demo.entity.User; import com.xxxx.demo.service.IUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; import java.util.Date; import java.util.List; import java.util.Map; /** * @ClassName EchartsController * @Description springboot整合echart * @Author Lishipu * @Date 2023/1/23 22:19 * Version 1.0 **/ @RestController @RequestMapping("/echarts") public class EchartsController { @Autowired private IUserService userService; @GetMapping("/example") public Result get() { Map<String, Object> map = new HashMap<>(); map.put("x", CollUtil.newArrayList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")); map.put("y", CollUtil.newArrayList(150, 230, 224, 218, 135, 147, 260));//HuTool_集合工具中的一个可以直接弄成list return Result.success(map); } @GetMapping("/members") public Result members() { List<User> list = userService.list(); int q1 = 0; // 第一季度 int q2 = 0; // 第二季度 int q3 = 0; // 第三季度 int q4 = 0; // 第四季度 for (User user : list) { Date createTime = (Date) user.getCreateTime(); Quarter quarter = DateUtil.quarterEnum(createTime); switch (quarter) { case Q1: q1 += 1; break; case Q2: q2 += 1; break; case Q3: q3 += 1; break; case Q4: q4 += 1; break; default: break; } } return Result.success(CollUtil.newArrayList(q1, q2, q3, q4));//HuTool_集合工具中的一个可以直接弄成list } }
浙公网安备 33010602011771号