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); }