图标插件Echarts的应用
图标插件Echarts的应用.
对于统计有好多优秀的插件,echarts就是一个非常不错的图标插件,但是在应用以及数据处理的时候有些小麻烦,一般的jQuery插件的应用都是jQuery插件的js控制与后台Controller的数据拼接共同完成。以下是本人在项目中的一个简单的应用.
ajax请求的数据格式:
label_x坐标_y坐标_数据类型,label_x坐标_y坐标_数据类型,label_x坐标_y坐标_数据类型,label_x坐标_y坐标_数据类型 这样的字符串格式,所以要对这些数据进行解析处理
对于统计有好多优秀的插件,echarts就是一个非常不错的图标插件,但是在应用以及数据处理的时候有些小麻烦,一般的jQuery插件的应用都是jQuery插件的js控制与后台Controller的数据拼接共同完成。以下是本人在项目中的一个简单的应用.
ajax请求的数据格式:
label_x坐标_y坐标_数据类型,label_x坐标_y坐标_数据类型,label_x坐标_y坐标_数据类型,label_x坐标_y坐标_数据类型 这样的字符串格式,所以要对这些数据进行解析处理
//ajax请求的数据data. function drawEchartPic(data){ //处理数据. var dataArr = data.split(","); var valArr = new Array(); var typeArr = ['堂兄弟节点','直接兄弟节点']; var label; var xp; var yp; var type; for(var j = 0; j < 2; j++){ //将数据封装成二维数组的形式. var outArr = new Array(); for(var i = 0; i < dataArr.length; i++){ label = dataArr[i].split("_")[0]; xp = dataArr[i].split("_")[1]; yp = dataArr[i].split("_")[2]; type = dataArr[i].split("_")[3]; var inArr = new Array(); if(j == type){ inArr.push(xp); inArr.push(yp); outArr.push(inArr); } } var valuestr = { name:typeArr[j], type:'scatter', itemStyle:{ normal:{ // color:tcolor, borderWidth: 4, label : {//显示label内容 show: true, position: 'right', formatter : function (params,ticket,callback) { for(var j = 0; j < dataArr.length; j++){ var inArr = new Array(); var lab; xp = dataArr[j].split("_")[1]; yp = dataArr[j].split("_")[2]; typevalue = dataArr[j].split("_")[3]; if(dataArr[j].split("_")[0].length>10){ lab=dataArr[j].split("_")[0].substr(0,9)+"..."; }else{ lab = dataArr[j].split("_")[0]; } if(xp == callback[0] && yp == callback[1]){ return lab.replace("*",""); //去除label的"*"标记. } } } } } // , // emphasis:{ // label : {show: true, position: 'outer'} // } }, data:outArr } valArr.push(valuestr); } //ECharts散点图插件初始化. require.config({ paths:{ echarts:'../js/echarts/echarts', 'echarts/chart/scatter' : '../js/echarts/echarts-map' } }); //ECharts散点图信息作图. setTimeout(function(){ require( [ 'echarts', 'echarts/chart/scatter' ], function (ec) { var myChart = ec.init(document.getElementById('echartPic')); myChart.setOption({ title : { text: '' }, tooltip : { trigger: 'item', formatter : function (value) { // alert(value); value的数据格式:直接兄弟节点,,4,1,, for(var j = 0; j < dataArr.length; j++){ var inArr = new Array(); xp = dataArr[j].split("_")[1]; yp = dataArr[j].split("_")[2]; typevalue = dataArr[j].split("_")[3]; label = dataArr[j].split("_")[0]; var xy = xp + "," + yp; if(xy == value[2]){ return label.replace("*",""); //去除鼠标悬浮像是文本的"*"标记. } } } }, calculable : true, legend: { data:['直接兄弟节点','堂兄弟节点'] }, xAxis : [ { type : 'category', data : ['1','2','3','4','5'], splitLine:{ show:false }, axisLabel : { clickable:false, formatter: '{value}', margin:20, textStyle:{'color':'green'} }, axisLine:{ show:true }, axisLabel:{ show:false } } ], yAxis : [ { type : 'value', scale:true, show:false, splitLine:{ show:false }, axisLabel : { formatter: '{value}', show:false }, axisLine:{ show:false } } ], animation: false, series : valArr }); //节点点击事件:param.data[0]为点击节点的x轴坐标,param.data[1]为点击节点的y轴坐标。 var ecConfig = require('echarts/config'); function eConsole(param) { var xval; var yval; var labelval; for(var j = 0; j < dataArr.length; j++){ var inArr = new Array(); xval = dataArr[j].split("_")[1]; yval = dataArr[j].split("_")[2]; if(xval == param.data[0] && yval == param.data[1]){ labelval = dataArr[j].split("_")[0].replace("*",""); //去除点击事件查询参数的"*"标记. window.open("/stkosservice/user/searchresult.htm?keyword=" + labelval,"_blank"); } } } myChart.on(ecConfig.EVENT.CLICK, eConsole); } ); },2000); }