普歌-前后端分离项目集成ECharts

---

首先声明本次前端框架使用是vue，服务端使用Springboot , mybatis plus

---

前台

1. 前端使用npm 安装echarts

npm install --save echarts@4.1.0

2. 选择表格（echarts官网拷贝自己需要的表格）

• echarts官网:https://echarts.apache.org/zh/index.html
  

  我选择了一个简单的折线图
  

3. 创建组件（把自己选择的echarts代码拷贝）

a.为ECharts准备一个具备大小（宽高）的Dom

<template>
	  <div class="app-container">
	<--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 600px;height:400px;"></div>
	  </div>
</template>

b.编写js代码

	<script>
	import echarts from 'echarts'
	import sta from '@/api/sta'  //导入编写好的api接口
	export default {
	  data() {
	    return {
	     //要像服务端发送查询数据,,类型(我举的例子是查询8.3-8.4登录数据)按照自己实际情况进行使用
	      searchObj: {
	        type: 'login_num',
	        begin: '2020-7-1',
	        end: '2020-8-4'
	      },
	      xData: [],
	      yData: []
	    }
	  },
	Created(){
	 this.showChart() //初始化调用接口获取数据展示图表
	},
	  methods: {
	    showChart() {
	      sta.selectStatisics(this.searchObj)
	      .then(response =>{
	        this.xData = response.data.data.dayList
	        this.yData = response.data.data.MList
	        this.setChart()   //获取到数据后调用图表参数进行显示
	      })
	      
	    },
	  
	    // 设置图标参数
	    setChart() {
	      // 基于准备好的dom，初始化echarts实例
	      this.chart = echarts.init(document.getElementById('chart'))
	
	      // console.log(this.chart)
	      // 指定图表的配置项和数据
	      var option = {
	        // x轴是类目轴（离散数据）,必须通过data设置类目数据
	        xAxis: {
	          type: 'category',
	          data: this.xData
	        },
	        // y轴是数据轴（连续数据）
	        yAxis: {
	          type: 'value'
	        },
	        // 系列列表。每个系列通过 type 决定自己的图表类型
	        series: [{
	          // 系列中的数据内容数组
	          data: this.yData,
	          // 折线图
	          type: 'line'
	        }],
	        //显示标题
	        title: {
	              text: "用户信息图"
	          },
	          //x坐标轴触发提示
	          tooltip: {
	                trigger: 'axis'
	            }
	                 }
	        //使用刚指定的配置项和数据显示图表
	      this.chart.setOption(option)
	    }
	  }
	}
</script>

4.编写与服务端通信的api接口（使用axios）

import request from '@/utils/request' //导入编写的axios工具类
export default{
    
    //获取图表数据，并显示
    selectStatisics(searchObj){
        return request({
           //服务端接口地址，因为我后端接收的为3个参数，所以要从页面传来的对象里取出来
            url:`/statistics/daily/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,   
            method:'get'
        })
    }   
}

服务端

5.编写后台

a.编写controller

	@RestController
	@RequestMapping("/statistics/daily")
	@CrossOrigin  //因为是前后端分离,所以要跨域     --我写的只是跨域中的一种
	public class DailyController {
	
	    @Autowired
	    private DailyService dailyService;  //注入服务
	
	
	    //获取数据图表   返回2部分数据，日期json数据 数量json数据
	    @GetMapping("showData/{type}/{begin}/{end}")
	    public R showData(@PathVariable String type ,
	                      @PathVariable String begin,
	                      @PathVariable String end){
	          Map<String,Object> map = dailyService.getShowData(type,begin,end);
	        return R.ok().data(map);
	    }
	}

b.编写service

@Service
public class DailyServiceImpl extends ServiceImpl<DailyMapper, Daily> implements DailyService {


    //获取数据图表   返回2部分数据，日期json数据 数量json数据
    @Override
    public Map<String, Object> getShowData(String type, String begin, String end) {

        QueryWrapper<Daily> queryWrapper = new QueryWrapper<>();
        queryWrapper.between("date_calculated",begin,end);
        queryWrapper.select("date_calculated",type); //查出这2个字段
        List<Daily> dailyList = baseMapper.selectList(queryWrapper);



        //要封装2个list  然后放到map里
        Map<String,Object> map = new HashMap<>();
        List<String> dayList = new ArrayList<>();
        List<Integer> MList = new ArrayList<>();

        for (int i = 0; i < dailyList.size(); i++) {
            Daily daily = dailyList.get(i);
            dayList.add(daily.getDateCalculated());

            //封装
            MList.add(daily.getLoginNum());
                  }
        //将封装好的2个list集合放到map集合中进行返回
        map.put("dayList",dayList);
        map.put("MList",MList);

        return map;
    }
}

前后联调

6.联调

喜欢的小伙伴可以点赞、关注、收藏哦

– 技术源于追求，技术改变生活 –