1.创建java工程

（1）工程的创建

首先用idea创建Spring initializr工程，完成基本的数据创建。在这里插入图片描述
完成相关的工程建立操作

（2）配置文件的配置

在这里插入图片描述
在该文件下配置以下信息

server:
  port: 8085 #端口号
spring:
data:	#数据源
elasticsearch:	#elasticsearch的相关配置关联
  cluster-name: kbserver	#集群名
  cluster-nodes: 192.168.109.138:9300	#集群主节点
  repositories:
    enabled: true	#批准可激活
 elasticsearch:
    rest:
 	 uris: ["http://192.168.109.138:9200"]	#访问数据端口

注意：这里的缩进是有严格要求的必须按要求缩进，不然会无法识别。

（3）基本结构的创建

为了方便后期的代码编写，这里要创建好大致的程序结构：

控制层：control
实体层：entity (这个是在前面的基础上修改的，真正在大数据的实际操作环境中是可以不用写实体类层)
模型层：model
- dao：运用层
- service 服务层

在这里插入图片描述

2.操作实例

读取集群中的数据，以性别“男”“女”分，在按不同月份来分析数据，最后用折线图的方式来展现

（1）创建实体类对象

字段名称要和集群中的字段一致

@Document(indexName = "shop",type = "shopper")
//这里是用注解来关联集群中的表和索引
public class Shopper {
    private static SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
 //规定了时间类型的格式
    @Id
    private String id;
    @JsonProperty(value = "spNo")
    private String spNo;
    @JsonProperty(value = "spGender")
    private String spGender;
    @JsonProperty(value = "date")
    private String date;
    @JsonProperty(value = "figure")
    private String figure;

    public void setId(String id) {
        this.id = id;
    }

    public void setSpNo(String spNo) {
        this.spNo = spNo;
    }

    public void setSpGender(String spGender) {
        this.spGender = spGender;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public void setFigure(String figure) {
        this.figure = figure;
    }

    public String getUserGender() {
        return spGender;
    }

    public Date getConsumeDate() throws ParseException {
        return sdf.parse(date);
        //处理时间单位
    }

    public double getConsumeMoney() {
        return Double.parseDouble(figure.replaceAll(",",""))/10000;
        //以万为单位处理数据
    }
}

（2）创建model层

创建到层的接口

public interface ShopperDao extends ElasticsearchRepository<Shopper,String> {}

创建服务层的实际操作

这里需要用到一些工具类，想具体了解的可以到我的工具类chart里查看

@Service
public class ShopperService {
    @Autowired
    private ShopperDao cd;

    Calendar calendar = null;
    Calendar cal=Calendar.getInstance();

    private Iterable<Shopper> findAll(){
        return cd.findAll();
    }

    public class Value{
        private double value = 0;
        public void setValue(double value){
            this.value += value;
        }
        public double getValue(){
            return value;
        }
    }

    public MultiLine<Line<Value>> lines() throws ParseException {
        MultiLine<Line<Value>> lines = MultiLine.get();
        //拉取数据
        lines.getLegendData().addAll(Arrays.asList("男","女"));
        List<String> xAxis = new ArrayList<>(12);
        //创建x轴上的数据
        for (int i = 1; i <=12 ; i++) {
            xAxis.add(i+"月");
        }
        lines.getxAxisData().addAll(xAxis);
        List<Line<Value>> list = Arrays.asList(
                Line.get("男",12),
                Line.get("女",12)
        );
        for (int i = 0; i < list.size(); i++) {
            for (int j = 0; j <12 ; j++) {
            //两重循环，将数据放进list中
                list.get(i).setData(new Value());
            }
        }
        Iterator<Shopper> it = findAll().iterator();
        //利用迭代器将数据累加起来
        while (it.hasNext()){
            Shopper c = it.next();
            int genderIndex = c.getUserGender().equals("男")? 0 : 1;
            cal.setTime(c.getConsumeDate());
            int month = cal.get(Calendar.MONTH);//获取数据中的月份
            //按月份插入数据   
            list.get(genderIndex).getData().get(month).setValue(c.getConsumeMoney());
        }
        //写入数据
        for (Line<Value> line : list) {
            lines.setSeriesData(line);
        }
        return lines;
    }
  }

（3）编辑控制层

@CrossOrigin
@RestController
public class ShopperControl {
    @Autowired
    private ShopperService cs;

    @GetMapping("/all.do")
    public MultiLine<Line<ShopperService.Value>> aggClientActByEventType(){
        try {
            return cs.lines();
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return null;
    }
}

（3）前端编辑

这里需要导入两个js到lib中，在网上都可以找到
在这里插入图片描述

index.js的编写

;(function($){

    $.ajax({
        type:"GET",
        url:"http://localhost:8085/all.do",
        data:{},
        dataType:"json",
        success:function(rst){
            let option = {
                title: {
                    text: '消费折线图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: rst.legendData
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: rst.xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: rst.seriesData
            };
            let echart = echarts.init(document.getElementById("all"));
            echart.setOption(option);
        },
        error:function(){
            alert("请求失败");
        }
    });

index.html的编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>esboot-chart</title>
    <style>
        #all{
            margin: 100px auto 0;
            width: 600px;
            height: 400px;
            border: #ddd 1px solid;
        }
    </style>
</head>
<body>
    <div id="all"></div>
   
    <script src="/lib/bdjquery-min-1.6.4.js"></script>
    <script src="/lib/echarts.js"></script>
    <script src="/js/index.js"></script>
</body>
</html>