对于统计有好多优秀的插件,echarts就是一个非常不错的图标插件,但是在应用以及数据处理的时候有些小麻烦,一般的jQuery插件的应用都是jQuery插件的js控制与后台Controller的数据拼接共同完成。以下是本人在项目中的一个简单的应用.
ajax请求的数据格式:
label_x坐标_y坐标_数据类型,label_x坐标_y坐标_数据类型,label_x坐标_y坐标_数据类型,label_x坐标_y坐标_数据类型 这样的字符串格式,所以要对这些数据进行解析处理
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);
}