一、html代码
<!--插件 -->
<script src="/coalminehwaui/static/js/project/echartsdemo/js/lib/echarts/echarts.min.js"></script>
<div class="row">
<!--三级培训和特种作业 --> <div id="container1" style=" height: 450%;width: 48%;margin-top: 5%;margin-bottom: 2%"></div> <!--综合培训 --> <div id="container2" style=" height: 450%;width: 50%;margin-top: 5%;margin-bottom: 2%;margin-left: 2%"></div> </div>
二、js代码
\'use strict\' $(function(){// 获取三级培训和特种作业数据 trainEducationAnalysis.getDepart(); // 获取综合培训数据 trainEducationAnalysis.getComprehensiveTrain(); }); var trainEducationAnalysis=new Object({//获取三级教育和特种作业人员数据 getDepart:function(){ // 横轴名称 var arrX=[]; // 纵轴数据 var specialY=[]; // 初级培训 var primaryY=[]; $.ajax({ cache: false, type: "post", url:backbasePath+\'/apia/v1/analysisManager/getDepart\', dataType:\'json\', data:{ token:$("#token").val() }, async : false, success: function(data) { // 返回正常数据 if(\'000000\' == data.code) { // 后台返回的数据都放在data里面 var obj = data.data; for(var i=0;i<obj.length;i++){ // 将横轴名称放在数组中 arrX.push(obj[i].sysdepartname); // 特殊培训个数 specialY.push(obj[i].specialtotal); // 初级培训个数 primaryY.push(obj[i].othertotal); } // 根据数据画柱状图 trainEducationAnalysis.drawByData(arrX, specialY, primaryY); }else{ toastr.success("请求数据为空"); } }, error:function(){ toastr.success("数据请求失败"); } }); }, //获取三级教育和特种作业人员数据 getComprehensiveTrain:function(){ // 横轴名称 var depart=[]; // 受训人员数据 var traineeY=[]; // 培训人员数据 var trainerY=[]; $.ajax({ cache: false, type: "post", url:backbasePath+\'/apia/v1/analysisManager/getComprehensiveTrain\', dataType:\'json\', data:{ token:$("#token").val() }, async : false, success: function(data) { // 返回正常数据 if(\'000000\' == data.code) { // 后台返回的数据都放在data里面 var obj = data.data; for(var i=0;i<obj.length;i++){ // 将横轴名称放在数组中 depart.push(obj[i].sysdepartname); // 受训人员数据 traineeY.push(obj[i].trainee); // 培训人员数据 trainerY.push(obj[i].trainer); } // 根据数据画柱状图 trainEducationAnalysis.drawComprehensiveTrain(depart, traineeY, trainerY); }else{ toastr.success("请求综合培训数据为空"); } }, error:function(){ toastr.success("请求综合培训数据失败"); } }); }, //三级教育和特种作业人员柱状图 drawByData:function(arrX, specialY, primaryY){ var myChart = echarts.init(document.getElementById(\'container1\')); var option = { title : { text: \'统计\', textStyle:{ color:"#282828" }, x:\'left\' }, tooltip : { trigger: \'axis\', // 坐标轴指示器，坐标轴触发有效 axisPointer : { // 默认为直线，可选为：\'line\' | \'shadow\' type : \'shadow\' } }, // 不同颜色代表的含义 legend: { bottom:-8, data: [\'入场三级教育人数\',\'特种作业人数\'], textStyle:{ color:"#a4a7ab" } }, // 直角坐标系内绘图网格 grid: { // 值越大越靠近右侧 x: 46, // 值越大越靠下 y: 30, // 值越大越靠左 x2: 32, // 值越大越靠上 y2: 40, // 边框线宽 borderWidth: 0 }, // x坐标轴刻度设置 xAxis : [ { type : \'category\', data : arrX, splitLine: { show: false }, axisLabel: { show: true, textStyle: { color: \'#a4a7ab\', align: \'center\' } } } ], // y坐标轴刻度设置 yAxis : [ { type : \'value\', min:0, max:50, splitLine: { show: false }, axisLabel: { show: true, textStyle: { color: \'#a4a7ab\' } } } ], series : [ { name:\'入场三级教育人数\', type:\'bar\', barWidth: 15,//柱状图宽度 barMaxWidth: 15,//最大宽度 data: primaryY, itemStyle:{ normal:{ color:"#6699CC" } } }, { name:\'特种作业人数\', type:\'bar\', barWidth: 15,//柱状图宽度 barMaxWidth: 15,//最大宽度 data: specialY, itemStyle:{ normal:{ color:"#66CC33" } } } ] }; myChart.setOption(option); }, //综合培训柱状图 drawComprehensiveTrain:function(depart, traineeY, trainerY){ var myChart = echarts.init($("#container2")[0]); var option = { title : { text: \'综合情况统计\', textStyle:{ color:"#282828" }, left:\'50\' }, tooltip : { trigger: \'axis\' }, // 直角坐标系内绘图网格 grid: { borderWidth: 0 }, // 默认关闭可计算特性 calculable : false, // 不同颜色代表的含义 legend: { data:[\'培训数\',\'受训人数\'], textStyle:{ color:"#a4a7ab" }, x:\'center\', y:\'30\' }, xAxis : [ { type : \'category\', name : \'项目\', data : depart, splitLine: { show: false }, axisLabel: { show: true, textStyle: { color: \'#a4a7ab\', align: \'center\' } } } ], yAxis : [ { type : \'value\', name : \'培训数\', max:20, min:0, axisLabel : { formatter: \'{value} \', textStyle: { color: \'#a4a7ab\', align: \'right\' } }, splitLine: { show: false }, }, { type : \'value\', name : \'受训人数\', max:100, min:0, axisLabel : { formatter: \'{value} \', textStyle: { color: \'#a4a7ab\', align: \'right\' } }, splitLine: { show: false }, }, ], series : [ { name:\'培训数\', // 设置图表类型为柱状图 type:\'bar\', barWidth:30, barMaxWidth:30, stack: \'培训数\', data: trainerY, itemStyle: { normal: { color:"#A00000" } } }, { name:\'受训人数\', // 设置图表类型为折线图 type:\'line\', yAxisIndex: 1, data: traineeY, itemStyle: { normal: { color:"#500000" } } }, ] }; myChart.setOption(option); } });
三、效果图