图标插件Echarts的应用.

对于统计有好多优秀的插件,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);
}