示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--统计图 --> <div class="row"> <div id="main" style="width: 900px; height: 350px; margin-top:80px;"></div> </div> </body> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript"> // 统计图 $.ajax({ url: "json/test.json", data: {}, type: 'GET', success: function(data) { console.log(JSON.stringify(data)) bloodFun(data.echatX, data.echatY,data.echatY2,data.echatY3); }, }); // 基于准备好的dom，初始化echarts实例 var bloodChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 function bloodFun(x_data, y_data, y2_data,y3_data) { bloodChart.setOption({ tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['正常','缺勤','补卡'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data: x_data, } ], yAxis : [ { type : 'value' } ], series : [ { name:'正常', type:'bar', data: y_data }, { name:'缺勤', type:'bar', data: y2_data }, { name:'补卡', type:'bar', data: y3_data } ] }); } </script> </html>
本地json
{ "echatX": [ "2019-07-02", "2019-07-03", "2019-07-04", "2019-07-05", "2019-07-06", "2019-07-07", "2019-07-08", "2019-07-09", "2019-07-10", "2019-07-11", "2019-07-12", "2019-07-13", "2019-07-14", "2019-07-15" ], "echatY": [ 120,121,123,123,125,127,128,129,120,123,122,126,129,122 ], "echatY2": [ 60,64,63,63,65,67,68,69,61,66,65,68,69,65 ], "echatY3": [ 60,64,63,63,65,67,68,69,161,66,65,68,169,165 ] }
