本文主要是介绍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"); }
}); |
着出来的效果如下：
这篇关于Echarts柱状图，饼状图，折线图案例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
