大屏展示 Echarts数据统一处理

  echarts数据处理千篇一律，每次开发都要controller，service，mapper，一套流程走一遍，效率低，且重复代码多。所以有了一下想法，controller和service做一个统一处理。根据前端传参，决定执行那个mapper的那个方法，这样只需要写mapper,mybatis和前端即可。

通用方法

testController

import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.common.utils.BeansUtils;
import com.ruoyi.common.utils.EchartsUtils;
import org.springframework.web.bind.annotation.*;

import java.lang.reflect.Method;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;

@RestController
@RequestMapping("/test")
public class Test1Controller extends BaseController {

    @GetMapping("/1")
    public AjaxResult test(@RequestParam HashMap<String,String> map){
        try {
            Class aClass = Class.forName("com.ruoyi.system.mapper."+map.get("mapper"));
            Object mapper = BeansUtils.getBean(map.get("mapper"),aClass );
            Method method = aClass.getMethod(map.get("method"));
            Object obj = method.invoke(mapper);
            List<LinkedHashMap<String,Object>> list = (List<LinkedHashMap<String,Object>>) obj;
            return AjaxResult.success(EchartsUtils.serialize(list));
        } catch (Exception e) {
            return AjaxResult.error(e.getMessage());
        }

    }
}

echarts数据处理（echarts5已经可以行转列了，故这里不再处理）；

EchsrtsUtils

import java.util.*;


public class EchartsUtils {
    /**
     * 处理echarts数据
     */
    public static List serialize(List<LinkedHashMap<String,Object>> list) {
        List result = new ArrayList();
        List<String> fieldNames = new ArrayList(list.get(0).keySet());
        fieldNames.remove(0);
        fieldNames.add(0,"product");
        result.add(fieldNames);
        for(HashMap<String,Object> map : list) {
            List<String> result2 = new ArrayList(map.values());
            result.add(result2);
        }
        return result;
    }
}

mapper

注意！请使用LinkedHashMap目的是为了排序，select 后字段的顺序就是查询出来的顺序。

import com.ruoyi.common.annotation.DataSource;
import com.ruoyi.common.enums.DataSourceType;
import java.util.LinkedHashMap;
import java.util.List;

@DataSource(DataSourceType.SLAVE)
public interface bjczTestMapper {
    
    public List<LinkedHashMap<String,Object>> test();

}

mybatis

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.ruoyi.system.mapper.bjczTestMapper">

    <select id="test" parameterType="map" resultType="java.util.LinkedHashMap">
        select name "姓名", shuxue "数学", yingyu "英语", yuwen "语文" from test_w
    </select>

</mapper>

前端vueApi方法

import request from '@/utils/request'

export function getEcharts(data) {
    var mapper = {
        mapper: 'bjczTestMapper',
        method: 'test2'
    }
    return request({
      url: '/test/1',
      method: 'get',
      params: Object.assign(mapper,data)
    })
  }

vue界面代码

<template>
  <div>
    <div id="main" style="width: 800px; height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getEcharts } from "@/api/testApi.js";
export default {
  //name: "测试",
  data() {
    return {
      option: null,
    };
  },
  created() {},
  mounted() {
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      getEcharts().then(res=>{
        this.render(res.data);
      })
    },
    // 绘制图表
    render(data) {
      console.log(data);
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          source: 
            data
          ,
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar"}, { type: "bar"}, { type: "bar"}],
      });
    },
  },
};
</script>

效果如下

 小菜鸟一只，大佬们有什么好的建议还请多多指点。                        --wjy