bootstrap画折线图

 原创   
营养快线送你 2023-03-03 前端
0 0 0 337

bootstrap没有工具类画折线图,ajax+jsp实现

我用的是echarts,官网:https://echarts.apache.org/zh/index.html

效果:


1.引入js  

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>


2.html代码

<div id="test"></div>


3.js部分:

$.ajax({
		var startTime = $('#datetimepicker1').val();
		var endTime = $('#datetimepicker2').val();
		 var params = {"startTime": startTime,"endTime":endTime}
		  url: '<%=path%>/admin/test',
          type: "get",
          data: params,
        success: function (result) {
            if (result) {
                bind1(result.data);
            }
        },
        error: function (errorMsg) {
            alert("加载数据失败");
        }
    });
function test(result) {
    var arr1 = [];  
    var arr2 = [];
    for(var i = 0; i <result.length; i++)
    {
       arr1[i] = result[i].num; //每天的件数
       arr2[i] = result[i].time; //当天的年月日日期
    }
    var lineChart = echarts.init(document.getElementById("container"));
    var lineoption = {
        title: {
            text: '测试'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['件数']
        },
        grid: {
            x: 40,
            x2: 40,
            y2: 24
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: arr2
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 件'
                }
            }
        ],
        series: [
            {
                name: '件数',
                type: 'line',
                data: arr1 ,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    lineChart.setOption(lineoption);
    $(window).resize(lineChart.resize);
}