EchartsÖù״ͼ£¬±ý״ͼ£¬ÕÛÏßͼ°¸Àý

ÔÚʹÓÃEcharts֮ǰÐèÒª×öµÄ¹¤×÷ÊÇÒýÈëEchartsËùÐèµÄjs： <script type="text/javascript" src="${scriptsPath}/echarts/echarts.min.js" charset="utf-8"></script> ¶¨ÒåÒªÔÚÄǸödivÇøÓòÏÔʾͼÐÎ： <div class="similarity-sentence" id="similarity-sentence"></div> <div class="unqualified-sentences" id="unqualified-sentences"></div> ÏÂÃæµÄid¾ÍÊÇÊÇÉÏÃædivµÄid distributionDiagram:function(id,topSimilarSentenceInfo) { var sentenceIndexArray = new Array(); var sentenceDataArray = new Array(); var colorListArray = new Array(); //»ñÈ¡¾ä×ÓµÄÊýÁ¿ if(docCheck.isNotBlank(topSimilarSentenceInfo)) { var sentenceNum = topSimilarSentenceInfo.length; for(var i = 0; i < sentenceNum; i++) { sentenceIndexArray.push((i + 1) + ''); sentenceDataArray.push(100); if(docCheck.isNotBlank(topSimilarSentenceInfo[i])) { //±íʾµÄÊÇprogress-bar-danger，¸ß¶ÈÖغÏ，ΣÏÕÐÍ if(topSimilarSentenceInfo[i].similarityValue >= 70) { colorListArray.push('#ED6F87'); } //±íʾµÄÊÇprogress-bar-warning,±íʾµÄ¾¯¸æÀàÐ굀 else if(topSimilarSentenceInfo[i].similarityValue >= 40 && topSimilarSentenceInfo[i].similarityValue < 70) { colorListArray.push('#E1B465'); } //±íʾµÄÊÇprogress-bar-successÕâÖÖÑÕÉ«µÄ，±íʾÊǵݲȫÀàÐ굀 else if(topSimilarSentenceInfo[i].similarityValue < 40) { colorListArray.push('#8ACD84'); } } else { colorListArray.push('#8ACD84'); } } } //ÓÃÓÚ³õʼ»¯Õâ¸öͼÐÎ var myChart = echarts.init(document.getElementById(id)); var option = { title:{text:'¾ä×ÓÏàËƶȷֲ¼Í¼'}, color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // ×ø±êÖáָʾÆ÷，×ø±êÖá´¥·¢ÓÐЧ type : 'shadow' // ĬÈÏΪֱÏß，¿ÉѡΪ：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : sentenceIndexArray, axisTick: { alignWithLabel: true }, axisLabel:{ show:true, textStyle:{ fontSize:7 } } } ], yAxis : [ { show : true, axisLabel : { show:false }, axisTick : { show:false }, type : 'value' } ], series : [ { name:'¾ä×Óƽ¾ùÏàËƶÈ', type:'bar', barWidth: '100%', tooltip:{ trigger : 'item', formatter : function(params) { var sentenceIndex = parseInt(params.name); var rate = topSimilarSentenceInfo[sentenceIndex -1].similarityValue; return '¾ä×ÓÐòºÅ:' + params.name + '<br/>ƽ¾ùÏàËƶÈ:' + rate + '%'; } }, data:sentenceDataArray, itemStyle: { normal: { color: function(params) { // build a color map as your need. // var colorList = [ // '#ED6F87','#ED6F87','#ED6F87','#ED6F87','#ED6F87', // '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84', // '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84', // '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84' // ]; return colorListArray[params.dataIndex] } } } } ] }; // Ϊecharts¶ÔÏó¼ÓÔØÊý¾Ý myChart.setOption(option); },

ÔËÐкóµÄЧ¹ûÈçÏÂ：

Öù״ͼ，±ý״ͼ，ÕÛÏßͼ°¸Àý：

/* * name :tuzuoquan * mail :email@qq.com * date :2016/11/27 * version :1.0 * description: * CopyRight (C) 2016-11-21 */ (function($){ $.studentIndex = { /* * »ñµÃjsonÊý¾Ý；Êý¾Ý¸ñʽ²é¿´jsonDataÖеÄjsonÎļþ * url: ajax µØÖ· * params type obj {} ÅäÖ÷µ»ØÊý¾ÝµÄ¶àÉÙ，day week month *callback ÓÃÓÚʵÀý»¯echart µÄ»Øµ÷º¯Êý *id ÓÃÓÚ·ÅÖÃechart±íµÄdomÔªËØ id ²»Óüӡ°#¡± * name; ±íÅ̵ÄÃû×Ö×Ô¶¨Òå * */ getData:function(url,params,id,callback){ //console.log("url = " +url); $.ajax({ type: "POST", url: url, //async: false, dataType: 'json', contentType: 'application/json; charset=utf-8', data: params, success: function(data) { //console.log(data); callback(id,data); } }); }, /** * ³õʼ»¯³Éͼ±ê * id :±íʾҪ·ÅÖÃÖù״ͼµÄdivµÄid * json :±íʾjsonÊý¾ÝµÄÄÚÈÝ */ initBarChart:function(id,json) { var legendDataArr = json.legendDataArr; var xAxisDataArr = json.xAxisDataArr; var seriesDataArr = json.seriesDataArr; var title = json.title; // »ùÓÚ×¼±¸ºÃµÄdom，³õʼ»¯echartsͼ±í var myChart = echarts.init(document.getElementById(id)); var option = { title:{ show:true, text:title, textStyle:{ fontSize:15, fontWeight:'normal' } }, tooltip: { show: true }, legend: { orient : 'horizontal', x : 'center', y : 'bottom', data:[title/*,'Ô¼ì²âÁ¿2'**/] }, xAxis : [ { type : 'category', data : ["12ÔÂ","1ÔÂ","2ÔÂ","3ÔÂ","4ÔÂ","5ÔÂ","6ÔÂ","7ÔÂ","8ÔÂ","9ÔÂ","10ÔÂ","11ÔÂ"] } //, //{ // type : 'category', // data : ["12ÔÂ1","1ÔÂ1","2ÔÂ1","3ÔÂ1","4ÔÂ1","5ÔÂ1","6ÔÂ1","7ÔÂ1","8ÔÂ1","9ÔÂ1","10ÔÂ1","11ÔÂ1"] //} ], yAxis : [ { type : 'value' } ], series : [ { "name":"Ô¼ì²âÁ¿", "type":"bar", "data":[20, 40, 80, 100, 120, 80,95,70,65,55,70,80] } ] }; option.legend.data = legendDataArr; //¶¨ÒåxÖáÉϵÄÿÁеıêÌâ option.xAxis[0].data = xAxisDataArr[0].data; //¶¨ÒåxÖáÉϵÄÿÁеÄÖµ for(var i = 0; i < legendDataArr.length;i++) { //Ìí¼ÓÉÏͼÀý option.series[i].name = legendDataArr[i]; //µÚ¶þ¸öÊÇÖù״ͼ option.series[i].type = "bar"; //Ϊͼ±êÌí¼ÓÊý¾Ý option.series[i].data = seriesDataArr[i].data; } // Ϊecharts¶ÔÏó¼ÓÔØÊý¾Ý myChart.setOption(option); }, /** * id :±íʾͼ±êÒª·ÅÖõÄλÖà * json :±íʾÓÃÓÚÏÔʾÕÛÏßͼʱËùÓõ½µÄjsonÊý¾Ý */ initLineChart:function(id,json) { var myChart = echarts.init(document.getElementById(id)); var legendDataArr = json.legendDataArr; var xAxisDataArr = json.xAxisDataArr; var seriesDataArr = json.seriesDataArr; option = { title:{ show:true, text:"Ìì¼ì²âÁ¿", textStyle:{ fontSize:15, fontWeight:'normal' } }, tooltip : { trigger: 'axis' }, legend: { orient : 'horizontal', x : 'center', y : 'bottom', data:['Ìì¼ì²âÁ¿'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar'/*, 'stack', 'tiled'**/]}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['ÖÜÒ»','Öܶþ','ÖÜÈý','ÖÜËÄ','ÖÜÎå','ÖÜÁù','ÖÜÈÕ'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'Ìì¼ì²âÁ¿', type:'line', stack: '×ÜÁ¿', data:[120, 132, 101, 134, 90, 230, 210] } ] }; option.legend.data = legendDataArr; //¶¨ÒåxÖáÉϵÄÿÁеıêÌâ option.xAxis[0].data = xAxisDataArr[0].data; //¶¨ÒåxÖáÉϵÄÿÁеÄÖµ for(var i = 0; i < legendDataArr.length;i++) { //Ìí¼ÓÉÏͼÀý option.series[i].name = legendDataArr[i]; //µÚ¶þ¸öÊÇÖù״ͼ option.series[i].type = "line"; //Ϊͼ±êÌí¼ÓÊý¾Ý option.series[i].data = seriesDataArr[i].data; } // Ϊecharts¶ÔÏó¼ÓÔØÊý¾Ý myChart.setOption(option); }, /** * id :±íʾͼ±êÒª·ÅÖõÄλÖà * json :±íʾÓÃÓÚÏÔʾÖù״ͼʱËùÓõ½µÄjsonÊý¾Ý */ initPieChart:function(id,json) { var myChart = echarts.init(document.getElementById(id)); var legendDataArr = json.legendDataArr; var seriesDataArr = json.seriesDataArr; option = { title:{ show:true, text:"Óû§À´Ô´", textStyle:{ fontSize:15, fontWeight:'normal' } }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'horizontal', x : 'center', y : 'bottom', //data:['»ªÄÏ','»ª¶«','Î÷±±','Î÷ÄÏ','»ª±±',"»ªÖÐ"] data:legendDataArr }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'center', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'Óû§À´Ô´', type:'pie', radius : ['50%', '70%'], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '20', fontWeight : 'bold' } } } }, data:[ {value:seriesDataArr[0], name:legendDataArr[0]}, {value:seriesDataArr[1], name:legendDataArr[1]}, {value:seriesDataArr[2], name:legendDataArr[2]}, {value:seriesDataArr[3], name:legendDataArr[3]}, {value:seriesDataArr[4], name:legendDataArr[4]}, {value:seriesDataArr[5], name:legendDataArr[5]}, {value:seriesDataArr[6], name:legendDataArr[6]} ] } ] }; // option.legend.data = legendDataArr; // //¶¨ÒåxÖáÉϵÄÿÁеÄÖµ // for(var i = 0; i < legendDataArr.length;i++) { // //Ìí¼ÓÉÏͼÀý // option.series[0].data[i].name = legendDataArr[i]; // //Ϊͼ±êÌí¼ÓÊý¾Ý // option.series[0].data[i].value = seriesDataArr[i].data; // } // Ϊecharts¶ÔÏó¼ÓÔØÊý¾Ý myChart.setOption(option); } }; })(jQuery); $(function() { $.studentIndex.getData(contextPath +"/admin/index/getMonthData.action", /**ÉèÖûص÷，¶ÔÓ¦µÄÊǺóÐøÏîÄ¿ÖеÄaction**/ {"id":"testId","roleId":"roleId"}, /**¶ÔÓ¦µÄÊǺóÐø´«µÝ¸øºǫ́actionµÄparams²ÎÊý*/ 'statistics-month', /**±íʾͼ±êÒª·ÅÔÚÄĸöidµÄdivÖÐ*/ $.studentIndex.initBarChart /**»Øµ÷，ÓÃÓÚÉú³Éͼ±êÓÃ*/ ); //$.studentIndex.getData(scriptsPath + "common/index/month.json", /**ÉèÖûص÷，¶ÔÓ¦µÄÊǺóÐøÏîÄ¿ÖеÄaction**/ //{"id":"testId","roleId":"roleId"}, /**¶ÔÓ¦µÄÊǺóÐø´«µÝ¸øºǫ́actionµÄparams²ÎÊý*/ //'statistics-month', /**±íʾͼ±êÒª·ÅÔÚÄĸöidµÄdivÖÐ*/ //$.studentIndex.initBarChart /**»Øµ÷，ÓÃÓÚÉú³Éͼ±êÓÃ*/ //); //$.studentIndex.getData(scriptsPath + "common/index/week.json", /**ÉèÖûص÷，¶ÔÓ¦µÄÊǺóÐøÏîÄ¿ÖеÄaction**/ // {"id":"testId","roleId":"roleId"}, /**¶ÔÓ¦µÄÊǺóÐø´«µÝ¸øºǫ́actionµÄparams²ÎÊý*/ //'statistics-week', /**±íʾͼ±êÒª·ÅÔÚÄĸöidµÄdivÖÐ*/ //$.studentIndex.initLineChart /**»Øµ÷，ÓÃÓÚÉú³Éͼ±êÓÃ*/ //); $.studentIndex.getData( contextPath + "/admin/index/getDayData.action", /**ÉèÖûص÷，¶ÔÓ¦µÄÊǺóÐøÏîÄ¿ÖеÄaction**/ {"id":"testId","roleId":"roleId"}, /**¶ÔÓ¦µÄÊǺóÐø´«µÝ¸øºǫ́actionµÄparams²ÎÊý*/ 'statistics-week', /**±íʾͼ±êÒª·ÅÔÚÄĸöidµÄdivÖÐ*/ $.studentIndex.initLineChart /**»Øµ÷，ÓÃÓÚÉú³Éͼ±êÓÃ*/ ); // $.studentIndex.getData( // scriptsPath + "/student/index/user.json", /**ÉèÖûص÷，¶ÔÓ¦µÄÊǺóÐøÏîÄ¿ÖеÄaction**/ // {"id":"testId","roleId":"roleId"}, /**¶ÔÓ¦µÄÊǺóÐø´«µÝ¸øºǫ́actionµÄparams²ÎÊý*/ // 'statistics-user', /**±íʾͼ±êÒª·ÅÔÚÄĸöidµÄdivÖÐ*/ // $.studentIndex.initPieChart /**»Øµ÷，ÓÃÓÚÉú³Éͼ±êÓÃ*/ // ); $.studentIndex.getData( contextPath + "/admin/index/groupByArea.action", /**ÉèÖûص÷，¶ÔÓ¦µÄÊǺóÐøÏîÄ¿ÖеÄaction**/ {"id":"testId","roleId":"roleId"}, /**¶ÔÓ¦µÄÊǺóÐø´«µÝ¸øºǫ́actionµÄparams²ÎÊý*/ 'statistics-user', /**±íʾͼ±êÒª·ÅÔÚÄĸöidµÄdivÖÐ*/ $.studentIndex.initPieChart /**»Øµ÷，ÓÃÓÚÉú³Éͼ±êÓÃ*/ ); //$.studentIndex.initPieChart("statistics-user",""); if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){ $("#statistics-month").find("div:first-child").css("margin-left","-155px"); } });

×ųöÀ´µÄЧ¹ûÈçÏÂ：