一、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); } });
三、效果圖
