echarts HTML折线图设置

1.添加 div echarts

<div class="col-sm-12">
  <div class="ibox-content">
    <div class="echarts" id="echarts-line-chart"></div>
   </div>
</div>

2.添加JS代码

$(function () {
            var rwmc = $("#rwmc").val();
            var scenario = $("#scenario").val();
            $.ajax({
                url: prefix + "/getarray",//通过ajax从数据库查询数据，返回值为xdata[][]
                async: false,
                type: 'POST',
                dataType: 'json',
                data : {
                    "rwmc": rwmc,
                    "scenario": scenario,
                },
                success: function (data) {
                    xdata = eval(data)
                },
            })
            var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
            var lineoption = {
                title: {
                    text: '车速监控',
                    subtext: 'y: km/h   x: ms'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['主车车速', '远车车速']
                },
                grid: {
                    x: 40,
                    x2: 40,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: xdata[0]
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '主车车速',
                        type: 'line',
                        data: xdata[1],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '远车车速',
                        type: 'line',
                        data: xdata[2],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);
        });

3.controller层 处理数据

 @PostMapping("/getarray")
    @ResponseBody
    public String[][] getarray(String rwmc,String scenario)
    {
        List<TestMessage> list = testMessageService.selectxdata(rwmc,scenario);
        String [][] xdata = new String[3][list.size()];
        for(int i=0;i<list.size();i++){
            xdata[0][i]=list.get(i).getXtime();//存储x坐标 时间戳
            xdata[1][i]=list.get(i).getHvs().toString();//存储y1坐标 主车车速
            xdata[2][i]=list.get(i).getRvs().toString();//存储y2坐标 远车车速
        }
        return xdata;//返回xdata[][]
    }
      

4.效果图