从后端数据库获取数据并传值到前端vue项⽬的echarts柱状图折线图饼图⾥不同图表的数据获取有⼀定的区别 在这些区别上花了不少功夫试验，把最后成功的⽅法做个记录，如果有类似项⽬要做的话，也可看看当个参考。
后端
后端都⼤同⼩异，⽅法上没有区别，在这⾥以柱状图为例。
sql：数据库的表格先写好，名称、类型、数据，然后连接数据库 ⽤的是Navicat写，表名：sys_mapbar
泰晤士报高等教育
在IDEA⾥，写XML⽂件，与数据库调⽤直接相关的语句
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-////DTD Mapper 3.0//EN"
"/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jdy.project.system.mapper.SysMapBarMapper">
<resultMap type="SysMapBar" id="SysMapBarResult">
<result property="barInCount" column="bar_incount"/>
<result property="barOutCount" column="bar_outcount"/>
<result property="barDate" column="bar_date"/>
</resultMap>
<sql id="selectSysMapBarVo">
select bar_incount,bar_outcount,bar_date from sys_mapbar
</sql>
<select id="selectSysMapBarList" parameterType="SysMapBar" resultMap="SysMapBarResult">
<include refid="selectSysMapBarVo"/>
解州
<where>
<if test="barInCount != null and barInCount != ''">and bar_incount = #{barInCount}</if>
<if test="barOutCount != null and barOutCount != ''">and bar_outcount = #{barOutCount}</if>
<if test="barDate != null and barDate != ''">and bar_date = #{barDate}</if>
</where>
</select>
</mapper>
然后vo实体类和Mapper⽅法，
//vo实体类，set/get/toString⽅法
public class SysMapBar extends BaseEntity {
@Excel(name ="⼊库数量")
private String barInCount;
@Excel(name ="出库数量")
private String barOutCount;
@Excel(name ="⽇期")
private String barDate;
public String getBarInCount(){
return barInCount;
}
public void setBarInCount(String barInCount){
this.barInCount = barInCount;
}
public String getBarOutCount(){
return barOutCount;
}
public void setBarOutCount(String barOutCount){
this.barOutCount = barOutCount;
}
public String getBarDate(){
return barDate;
}
public void setBarDate(String barDate){
this.barDate = barDate;
}
@Override
public String toString(){
return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
.append("barInCount",getBarInCount())
.append("barOutCount",getBarOutCount())
磷肥与复肥.append("barDate",getBarDate())
.
toString();
}
}
//Mapper⽅法
public interface SysMapBarMapper {
public List<SysMapBar>selectSysMapBarList(SysMapBar sysMapBar);
}
Mapper层相当于dao层，对数据库进⾏数据持久化操作，⽅法语句直接针对数据库操作，⽽Service层针对Controller，Service的impl是把Mapper和Service进⾏整合的⽂件。
然后写Service和ServiceImpl，这些⽂件写的顺序不⼀定，⾃⼰的逻辑不会混乱就⾏
//Service
public interface ISysMapBarService {
public List<SysMapBar>selectSysMapBarList(SysMapBar sysMapBar);
}
//ServiceImpl
@Service
public class SysMapBarServiceImpl implements ISysMapBarService {
@Autowired//@Autowired 注释，它可以对类成员变量、⽅法及构造函数进⾏标注，完成⾃动装配的⼯作。private SysMapBarMapper sysMapBarMapper; @Override//⼀般⽤途：帮助⾃⼰检查是否正确的复写了⽗类中已有的⽅法告诉读代码的⼈，这是⼀个复写的⽅法public List<SysMapBar>selectSysMapBarList(SysMapBar sysMapBar){ return sysMapBarMapper.selectSysMapBarList(sysMapBar);
}
}
最后是Controller，配置接⼝路径
//Controller
@RestController
@RequestMapping("/dashboard/barchart")
public class SysMapBarController extends BaseController {
@Autowired
private ISysMapBarService sysMapBarService;
@ResponseBody
@PreAuthorize("@ss.hasPermi('dashboard:barchart:listBar')")//权限访问设置落日牛仔
@GetMapping("/listBar")
public TableDataInfo listBar(SysMapBar sysMapBar){
List<SysMapBar> listBar = sysMapBarService.selectSysMapBarList(sysMapBar);
return getDataTable(listBar);
}
}
前端
若依框架的路由，同步在src/api的同名⽂件⾥写js⽂件
barchart.js
import from '@/utils/request'
//查询bar列表
export function listBar(query){
return request({
url:'/dashboard/barchart/listBar',
method:'get',
params: query
})
}
1.柱状图
<!--柱状图-->
<template>
<div :class="className":/>
</template>
<script>
import from 'echarts'
require('echarts/theme/macarons')// echarts theme
import from './../mixins/resize'
import{ listBar } from "@/api/dashboard/barchart";
const animationDuration =3000
export default{
mixins:[resize],
props:{
props:{
className:{
type: String,
default:'chart'
},
银针秀width:{
type: String,
default:'760px'
},
height:{
type: String,
耿彦秋default:'303px'
}
},
data(){
return{
MapList:[],
rows:[],
BarList:[],
barInCount:[],
barOutCount:[],
barDate :[],
chart:null,
queryParams:{
barInCount: undefined,
barOutCount: undefined,
barDate: undefined,
},
}
},
mounted(){
this.$nextTick(()=>{
this.initChart()
})
},
beforeDestroy(){
if(!this.chart){
return
}
this.chart.dispose()
this.chart =null
},
created(){
},
methods:{
getBarList(){
this.loading =true;
listBar(this.queryParams).then(response =>{
MapList =ws;
console.log("柱状图数据："+MapList);// 确认数据有获取到 let MapList =MapList;
if(MapList){
let obj =eval(MapList);
for(let i=0;i<obj.length;i++){
this.barInCount.push(MapList[i].barInCount);
this.barOutCount.push(MapList[i].barOutCount);
this.barDate.push(MapList[i].barDate);
}
}
//动态插⼊数据时，数据在这⾥设置更新
this.chart.setOption({
xAxis:{
data:this.barDate
},
series:[{
series:[{
name:'⼊库数量',
data:this.barInCount,
},
{
name:'出库数量',
data:this.barOutCount,
}]
});
});
},
initChart(){
this.chart = echarts.init(this.$el,'macarons')
this.chart.setOption({
tooltip:{
trigger:'axis',
axisPointer:{// 坐标轴指⽰器，坐标轴触发有效
type:'shadow'// 默认为直线，可选为：'line' | 'shadow' }
},
grid:{
top:30,
left:'2%',
right:'2%',
bottom:'3%',
containLabel:true
},
xAxis:[{
type:'category',
data:this.barDate,
axisTick:{
alignWithLabel:true
}
}],
yAxis:[{
type:'value',
axisTick:{
show:false
}
}],
legend:{
data:['⼊库数量','出库数量'],
textStyle:{
// fontSize: 16,
color:'white'
}
},
series:[{
name:'⼊库数量',
type:'bar',
stack:'Amount',
barWidth:'10%',
data:this.barInCount,
itemStyle:{
normal:{
label:{
show:true,//开启显⽰
position:'top',//在上⽅显⽰
textStyle:{//数值样式
color:'white',
/
/ fontSize: 16
}
}
}
},
animationDuration
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议