echart封装，前端简单路由，图表设置自动化

https://github.com/cclient/EhartDemoSetByAngular

后端node.js

前端插件

echart,jquery,jqueryui,datapicker,angularjs,tag-it

bootstrap(这个坑死我，选型失误datapicker样式和bootstrap 不兼容，记录在http://www.cnblogs.com/zihunqingxin/p/4435815.html)

源码内容

封装了echart的

大地图(上级下级跳转，echar有个缺陷，找不到修改的地方，用户体验不太好，这个较费时)

时间线饼图

对比图(X，Y轴)

饼图（Pie）

未封装完整,因封装作到一半，转了项目。

碰到jquery兼容性问题

项目引用了 datapicker其调用curCSS方法，官方样例默认引用的jq1.7

项目主体引用jquery1.11没有curCSS 方法

两版本对照查代码可知

Jquery.curCSS = Jquery.css;

打补丁如下

//jquery 兼容性问题，引的1.11没有curCSS方法，datapicker用的curCSS引的jq1.7
(function (Jquery) {
Jquery.curCSS = Jquery.css;
Date.prototype.toChineseDate = function () {
return this.getFullYear() + '年' + (this.getMonth() + 1) + '月' + this.getDate() + '日';
}
})($)

jq拓展封装库

//jquery 兼容性问题，引的1.11没有curCSS方法，datapicker用的curCSS引的jq1.7

echart主要封装代码

createchartobj.js

/**
* Created by cdpmac on 14/12/17.
*/
(function ChartNameSpace() {
function getYYYYMMDD(date, spliter) {
spliter = spliter != undefined ? spliter : '-';
return date.getFullYear() + spliter
+ ('0' + (date.getMonth() + 1)).slice(-2) + spliter
+ ('0' + date.getDate()).slice(-2);
};
function BaseChartObj() {
};
BaseChartObj.prototype.bindEvent = function () {
var self = this;
if (self.tableDOMId) {
$('#' + this.tableDOMId + '').on('xhr.dt', function (e, settings, json) {
self._ajaxComplete(json);
});
}
if (self.otherIni) {
self.otherIni();
}
};
BaseChartObj.prototype.iniTable = function () {
var self = this;
if (!self.tableDOMId) return;
var orderindex; //media  4 date
function isOrderByGroupColumns(orderindex) {
return self.groupColumnIndex && self.groupColumnIndex.indexOf(orderindex) != -1
}
var language = {
"lengthMenu": "每页显示 _MENU_ 行",
"sZeroRecords": "0条结果",
"sInfo": "第 _PAGE_ 页 [共 _PAGES_ 页]",
"sInfoEmpty": "无数据",
"sSearch": "过滤:",
"oPaginate": {
"sFirst": "首页",
"sLast": "最后",
"sNext": "下一页",
"sPrevious": "上一页"
},
"sInfoFiltered": "(从 _MAX_ 行中过滤)"
};
var columnDefs = self.groupColumnIndex ? [
{ "visible": false, "targets": self.groupColumnIndex[0] }
] : [];
var columns=self.showDataValue.map(function(item){
return   { "data": item,"defaultContent":'' }
})
var order = self.groupColumnIndex ? [
//            [ self.groupColumnIndex[0], 'asc' ],[self.provinceIndex,'asc']
[ self.groupColumnIndex[0], 'asc' ]
] : [];
self.table = $('#' + self.tableDOMId + '').DataTable({
"columnDefs": columnDefs,
"columns":columns,
"order": order,
"language": language,
"displayLength": 25,
"drawCallback": function (settings) {
if (self.groupColumnIndex && self.groupColumnIndex.length > 0 && settings.aLastSort.length > 0) {
orderindex = settings.aLastSort[0].col;
if (orderindex == undefined) {
orderindex = self.groupColumnIndex[0];
}
if (self.table && orderindex == self.groupColumnIndex[0]) {
self.table.column(self.groupColumnIndex[0]).visible(false);
self.table.column(self.groupColumnIndex[1]).visible(true);
}
if (self.table && orderindex == self.groupColumnIndex[1]) {
self.table.column(self.groupColumnIndex[1]).visible(false);
self.table.column(self.groupColumnIndex[0]).visible(true);
}
if (!isOrderByGroupColumns(orderindex)) {
self.table.column(self.groupColumnIndex[1]).visible(true);
self.table.column(self.groupColumnIndex[0]).visible(true);
}
var api = this.api();
var rows = api.rows({page: 'current'}).nodes();
var last = null;
if (isOrderByGroupColumns(orderindex)) {
api.column(orderindex, {page: 'current'}).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group" style="background-color:bisque "><td colspan="9">' + group + '</td></tr>'
);
last = group;
}
});
}
}

}
});
// Order by the grouping
$('#' + self.tableDOMId + ' tbody').on('click', 'tr.group', function () {
var currentOrder = self.table.order()[0];
if (currentOrder[0] === orderindex && currentOrder[1] === 'asc') {
table.order([ orderindex, 'desc' ]).draw();
}
else {
table.order([ orderindex, 'asc' ]).draw();
}
});
};
BaseChartObj.prototype._ajaxComplete = function (json) {
var self = this;
self.jsonData=[];
if (self.maindivDOMId) {
if (json && json.data && json.data.length > 0) {
$('#' + self.maindivDOMId + '').css('display', 'block');
self.jsonData = json.data || json;
self.drawCanvas();
}
}
$.Prompt({close:true});
};
BaseChartObj.prototype.loadData = function (geturlpar) {
var self = this;
self.queryString = geturlpar;
var linkchar = '?';
if (self.queryString.indexOf('?') >= 0) {
linkchar = '&';
}
if (self.showDataValue) self.queryString += linkchar + 'columns=' + self.showDataValue;
linkchar = '&';
if (self.datebegin) self.queryString += linkchar + 'datebegin=' + self.datebegin;
if (self.dateend) self.queryString += linkchar + 'dateend=' + self.dateend;
if (self.tableDOMId)
self.table.ajax.url(self.searchUrl + self.queryString).load();
else {
$.get(self.searchUrl + self.queryString, function (data, status) {
self._ajaxComplete(data);
});
}
};
BaseChartObj.prototype.prepareCanvas = function () {
var self = this;
if (self._myChart && self._myChart.dispose) {
self._myChart.dispose();
}
if (!self.domMain) {
self.domMain = document.getElementById(self.maindivDOMId);
}
self._myChart = echarts.init(self.domMain);
window.onresize = self._myChart.resize;
self._myChart.showLoading();
};
BaseChartObj.prototype.iniDom = function (parentdomid) {
var jqparentdom = $("#" + parentdomid + "");
var self = this;
if (self.maindivDOMId) {
var maindivhtml = '<div class="col-xs-' + self.maindivDOMWidth + '"><div id="' + self.maindivDOMId + '" style="display: none; height: ' + self.maindivDOMHeight + 'px; cursor: default; background-color: rgba(0, 0, 0, 0);"></div></div>';
jqparentdom.append(maindivhtml);
}
if (self.tableDOMId) {
var tablehtml = '';
tablehtml += '<div class="col-xs-' + self.tableDOMWidth + '"><table id="' + self.tableDOMId + '" class="display" cellspacing="0" width="100%">';
var theadhtml = '', tfoothtml = '';
theadhtml += ' <thead><tr>';
//            tfoothtml+=' <tfoot><tr>';
for (var i = 0; i < self.showDataName.length; i++) {
theadhtml += '<th>' + self.showDataName[i] + '</th>';
//                tfoothtml+='<th>'+self.showDataName[i]+'</th>';
}
//            tfoothtml+='</tr></tfoot>';
theadhtml += '</tr></thead>';
tablehtml += theadhtml;
//            tablehtml+=tfoothtml;
tablehtml += '</table></div>';
jqparentdom.append(tablehtml);
}
if (self.otherDomIni) {
self.otherDomIni(self.maindivDOMId);
}
};

var PieTimeLineAnlysisPrototype = new BaseChartObj();
PieTimeLineAnlysisPrototype.drawCanvas = function () {
var self = this;
self.prepareCanvas();
var datebegin = new Date(self.datebegin.getTime());
self.dateRange = [];
while (datebegin < self.dateend) {
self.dateRange.push(getYYYYMMDD(datebegin));
datebegin.addDays(1);
}
var option = {
timeline: {
label: {
//                formatter : function(s) {
//                    return s.slice(0, 9);
//                }
}
},
options: [
{
title: {
text: self.title,
//                        subtext: '纯属虚构'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
//                    data:['Chrome','Firefox','Safari','IE9+','IE8-']
},
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: 'left',
max: 1700
}
}
},
restore: {show: true},
saveAsImage: {show: true}
}
}
},
]
};
option.timeline.data = [];
function getindex(date) {
for (var i = 0; i < self.jsonData.length; i++) {
if (self.jsonData[i]['date'] == date) {
return i;
}
}
return -1;
}
for (var i = 0; i < self.dateRange.length; i++) {
var date = self.dateRange[i];
option.timeline.data.push(date);
var series = [
{
name: '浏览器（数据纯属虚构）',
type: 'pie'
}
]
series[0].data = [];
var thisdateindex = getindex(date);
for (var j = self.dataRange[0]; j <= self.dataRange[1]; j++) {
if (thisdateindex >= 0) {
var datedata = self.jsonData[thisdateindex];
series[0].data.push({value: datedata[self.showDataValue[j]], name: self.showDataName[j]});
}
else
series[0].data.push({value: 0, name: self.showDataName[j]});
}
option.options[i] = option.options[i] || {};
option.options[i].series = series;
}
option.options[0].legend.data = self.showDataName.slice(self.dataRange[0], self.dataRange[1] + 1);
self._myChart.hideLoading();
self._myChart.setOption(option, true);
};
function PieTimeLineAnlysis() {
this.showDataValue = [];
this.showDataName = [];
this.dateRange = [];
this.dataRange = [];
this.searchUrl = '';
this.tableDOMId = 'example';
};
PieTimeLineAnlysis.prototype = PieTimeLineAnlysisPrototype;

var ChinaMapAnlysisPrototype = new BaseChartObj();
ChinaMapAnlysisPrototype.drawCanvas = function () {
var self = this;
self.prepareCanvas();
var echartlegend = self.showDataName.slice(self.lengendRange[0], self.lengendRange[1] + 1);
var currentLengend = '';
var curIndx = 0;
var mapType = [
'china',
// 23个省
'广东', '青海', '四川', '海南', '陕西',
'甘肃', '云南', '湖南', '湖北', '黑龙江',
'贵州', '山东', '江西', '河南', '河北',
'山西', '安徽', '福建', '浙江', '江苏',
'吉林', '辽宁', '台湾',
// 5个自治区
'新疆', '广西', '宁夏', '内蒙古', '西藏',
// 4个直辖市
'北京', '天津', '上海', '重庆',
// 2个特别行政区
'香港', '澳门'
];
var mapdatacache = {};
function updateResultDataRange(seriedata) {
var valuelist = [];
for (var j = 0; j < seriedata.length; j++) {
valuelist.push(seriedata[j].value);
}
var max = (seriedata.length > 0) ? ( Math.max.apply(Math, valuelist)) : 0;
var min = (seriedata.length > 0) ? ( Math.min.apply(Math, valuelist)) : 0;
self.result.dataRange.min = min;
self.result.dataRange.max = max;
}
function Bindmapdata(mapname) {
if (mapdatacache.hasOwnProperty(mapname)) {
self.result = mapdatacache[mapname];
if (currentLengend) {
for (var i = 0; i < self.result.series.length; i++) {
if (self.result.series[i].name == currentLengend) {
updateResultDataRange(self.result.series[i].data);
break;
}
}
}
self._myChart.setOption(self.result, true);
}
else {
self.result = {
title: {
text: '全国34个省市自治区统计数据',
//                        subtext : '（点击切换）'
},
tooltip: {
trigger: 'item'
//            formatter: '{b}'
},
legend: {
selectedMode: 'single',
orient: 'vertical',
x: 'right'
},
dataRange: {
min: 0,
max: 100000,
//                        color:['orange','yellow'],
color: ['orangered', 'yellow', 'lightskyblue'],
text: ['高', '低'],           // 文本，默认为数值文本
calculable: true
}
};
var lastname = (mapname == 'china' ? '' : '市');
self.result.legend.data = echartlegend;
self.result.legend.selected = {};
self.result.series = [];
var seriesdata = {};
for (var j = 0; j < self.jsonData.length; j++) {
var item = self.jsonData[j];
for (var i = 0; i < echartlegend.length; i++) {
var legendname = echartlegend[i];
seriesdata[legendname] = seriesdata[legendname] || [];
var nameindex = (mapname == 'china' ? self.provinceIndex : self.cityIndex);
if (item[self.showDataValue[ i + self.lengendRange[0]]] && (mapname == 'china' || mapname.indexOf(item[self.showDataValue[self.provinceIndex]]) != -1))
{
var ishas = false;
for (var z = 0; z < seriesdata[legendname].length; z++) {
if (seriesdata[legendname][z].name == item[self.showDataValue[nameindex]] + lastname) {
seriesdata[legendname][z].value += item[self.showDataValue[i + self.lengendRange[0]]];
ishas = true;
}
}
if (!ishas) {
seriesdata[legendname].push({name: item[self.showDataValue[nameindex]] + lastname, value: item[self.showDataValue[i + self.lengendRange[0]]]});
}
}
}
}
for (var i = 0; i < echartlegend.length; i++) {
var legendname = echartlegend[i];
var serie = {
name: legendname, type: 'map',
mapType: mapname,
selectedMode: 'single',
itemStyle: {
normal: {label: {show: true}},
emphasis: {label: {show: true}}
}
};
serie.data = seriesdata[legendname] || [];
if (currentLengend && currentLengend == legendname) {
self.result.legend.selected[legendname] = true;
updateResultDataRange(serie.data);
}
else {
self.result.legend.selected[legendname] = false;
}
self.result.series.push(serie);
}
if (!currentLengend) {
self.result.legend.selected[echartlegend[0]] = true;
updateResultDataRange(self.result.series[0].data);
}
mapdatacache[mapname] = self.result;
self._myChart.hideLoading();
self._myChart.setOption(self.result, true);
}
}

//      self._myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
self._myChart.on('mapSelected', function (param) {
var len = mapType.length;
var mt = mapType[curIndx % len];
if (mt == 'china') {
// 全国选择时指定到选中的省份
var selected = param.selected;
for (var i in selected) {
if (selected[i]) {
mt = i;
while (len--) {
if (mapType[len] == mt) {
curIndx = len;
}
}
break;
}
}
}
else {
curIndx = 0;
mt = 'china';
}
if(mt!='china'){
self.table.column(self.provinceIndex).search(mt).draw();

}
else{
self.table.column(self.provinceIndex).search("").draw();
}
Bindmapdata(mt);
});
self._myChart.on('legendSelected', function (param) {
self.result.legend.selected = param.selected;
for (var legend in param.selected) {
if (param.selected[legend] === true) {
var index = echartlegend.indexOf(legend);
var seriedata = self.result.series[index];
currentLengend = legend;
updateResultDataRange(seriedata.data);
break;
}
}
self._myChart.setOption(self.result, true);
});
Bindmapdata('china');
};
function ChinaMapAnlysis() {
this.lengendRange = [2, 7];
this.showDataValue = ['pubID', 'date', 'click', 'ipClick', 'ipPv', 'pv', 'uvClick', 'uvPv', 'province', 'city'];
this.showDataName = ['媒体名称', '日期', '点击', 'ip点击', 'ip展示', '展示', 'uv点击', 'uv展示', '省', '市'];
this.provinceIndex = this.showDataValue.length - 2;
this.cityIndex = this.showDataValue.length - 1;
this.groupColumnIndex = [0, 1];
this.searchUrl = '/media/search';
//        this.tableDOMId = 'example';
//        this.maindivDOMId = 'chinamapmain';
};
ChinaMapAnlysis.prototype = ChinaMapAnlysisPrototype;

var XYCompareAnlysisprototype = new BaseChartObj();
XYCompareAnlysisprototype.drawCanvas = function () {
var self = this;
self.prepareCanvas();
var XValueIndex = self.xIndex;
var groupIndex = self.objIdIndex;
var YValueIndex = self.showDataValue.indexOf($('#' + self.compareValueSelectDOMId + '').val());
var  Xname=self.showDataValue[XValueIndex];

var Yname=self.showDataValue[YValueIndex];
var Gname=self.showDataValue[groupIndex];
var medias = [];
for (var i = 0; i < self.jsonData.length; i++) {
medias.push(self.jsonData[i][Gname]);
}
medias = $.unique(medias);
var allmediadata = {};
for (var i = 0; i < self.jsonData.length; i++) {
//            var medianame = self.jsonData[i][groupIndex];
var medianame = self.jsonData[i][Gname];
allmediadata[medianame] = allmediadata[medianame] || {};
if (self.jsonData[i][Yname]) {
allmediadata[medianame][self.jsonData[i][Xname]] = allmediadata[medianame][self.jsonData[i][Xname]] || 0;
allmediadata[medianame][self.jsonData[i][Xname]] += (self.jsonData[i][Yname] || 0);
}
}
self.dateranges = [];
var datebegin = new Date(self.datebegin.getTime());
while (datebegin < self.dateend) {
self.dateranges.push(getYYYYMMDD(datebegin));
datebegin.addDays(1);
}
var option = {
title: {
text: self.title
},
tooltip: {
trigger: 'axis'
},
legend: {},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
//                data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
}
}
],
series: []
};
option.legend.data = medias;
for (var z = 0; z < option.legend.data.length; z++) {
var serie = {
type: 'line',
//            data:[11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
};
serie.name = option.legend.data[z];
var data = [];
for (var t = 0; t < self.dateranges.length; t++) {
var medianame = option.legend.data[z];
if (allmediadata[medianame][self.dateranges[t]]) {
data.push(allmediadata[medianame][self.dateranges[t]]);
} else   data.push(0);

}
serie.data = data;
option.series.push(serie);
}
option.title.text = '';
option.xAxis[0].data = self.dateranges;
console.log(JSON.stringify(option));
self._myChart.hideLoading();
self._myChart.setOption(option, true)
};
XYCompareAnlysisprototype.otherDomIni = function (parentdomid) {
var self = this;

if (self.compareValueSelectDOMId) {
//            console.log("#" + parentdomid + "");
//            console.log("#" + parentdomid + "");
var jqparentdom = $("#" + parentdomid + "");
var maindivhtml = '<div class="col-xs-12"><lable>比较内容</lable><select id="' + self.compareValueSelectDOMId + '" class="form-control"></select></div>';
jqparentdom.before(maindivhtml);
}
};
XYCompareAnlysisprototype.otherIni = function () {
var self = this;
if (this.compareValueSelectDOMId) {
var themeSelector = $('#' + this.compareValueSelectDOMId + '');
if (themeSelector) {
var optionstring = '';
for (var i = self.compareRange[0]; i <= self.compareRange[1]; i++) {
if (i != 0) {
optionstring += '<option  value="' + self.showDataValue[i] + '">' + self.showDataName[i] + '</option>'
}
else {
optionstring += '<option selected="true"   value="' + self.showDataValue[i] + '">' + self.showDataName[i] + '</option>'
}
}
}
themeSelector.html(
optionstring
);
$(themeSelector).on('change', function () {
self.drawCanvas();
});
}
};
function XYCompareAnlysis() {
this.showDataValue = ['pubID', 'date', 'click', 'ipClick', 'ipPv', 'pv', 'uvClick', 'uvPv', 'province', 'city'];
this.showDataName = ['媒体名称', '日期', '点击', 'ip点击', 'ip展示', '展示', 'uv点示', 'uv展示', '省', '市'];
this.groupColumnIndex = [0, 1];
this.objIdIndex = 0;
this.xIndex = 1;
this.compareRange = [2, 7];
this.searchUrl = '/media/search';
this.compareValueSelectDOMId = 'value-select';
this.searchUrl = '/media/search';
this.queryString = '';
this.maindivDOMId = 'xymain';
this.tableDOMId = 'example';
this.jsonData = '';
this.dateranges = [];
};
XYCompareAnlysis.prototype = XYCompareAnlysisprototype;

var PieAnlysisPrototype = new BaseChartObj();
PieAnlysisPrototype.drawCanvas = function () {
var self = this;
self.prepareCanvas();
var option = {
title: {
text: self.title,
//                subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
//                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
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: 'left',
max: 1548
}
}
},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
//                    data:[
//                        {value:335, name:'直接访问'},
}
]
};
option.legend.data = self.showDataName.slice(self.dataRange[0], self.dataRange[1] + 1);
var data = [];
for (var z = self.dataRange[0]; z <= self.dataRange[1]; z++) {
data.push({name: self.showDataName[z], value: self.jsonData[0][self.showDataValue[z]]});
}
option.series[0].data = data;
self._myChart.hideLoading();
this._myChart.setOption(option, true);
};
function PieAnlysis() {
this.showDataValue = [];
this.showDataName = [];
this.dataRange = [];
this.searchUrl = '';
};
PieAnlysis.prototype = PieAnlysisPrototype;

$.createChartObj = function (chartjson) {
for (var key in chartjson) {
if (chartjson[key].indexOf && chartjson[key].indexOf('[') > -1) {
var temarr = eval(chartjson[key]);
if ($.isArray(temarr)) {
console.log(chartjson[key]);
chartjson[key] = temarr;
}
}
}
if (chartjson.charttype == 'pietimeline') {
var pietimelineobj = new PieTimeLineAnlysis();
$.extend(pietimelineobj, chartjson);
return pietimelineobj;
}
else if (chartjson.charttype == 'bigmap') {
var chinamapanlysis = new ChinaMapAnlysis();
$.extend(chinamapanlysis, chartjson);
return chinamapanlysis;
}
else if (chartjson.charttype == 'xycompare') {
var xyanlysis = new XYCompareAnlysis();
$.extend(xyanlysis, chartjson);
return xyanlysis;
}
else if (chartjson.charttype == 'pie') {
var pieanlysis = new PieAnlysis();
$.extend(pieanlysis, chartjson);
return pieanlysis;
}
};
//根据QueryString参数名称获取值
$.getQueryStringByName = function (name) {
var result = location.search.match(new RegExp("[\\?\\&]" + name + "=([^\\&]+)", "i"));
if (result == null || result.length < 1) {
return "";
}
return result[1];
};
$.iniMenu = function (menuid) {
if (!$.configMenu) {
$.ajax(
{
url: "/getmenu",
async: false,
type: "GET",
//                    context: document.body,
success: function (data, satus) {
var data = data.nodes;
$.configMenu = data;
var html = '';
html += '<li class="active"><a href="/"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>';
for (var i = 0; i < data.length; i++) {
if (data[i].showtype != '页面' && data[i].showtype != '图表') {
html += '<li class="treeview"><a href="#"><i class="fa  fa-pencil"></i><span>' + data[i].title + '</span><i class="fa pull-right fa-angle-left"></i></a><ul class="treeview-menu" style="display: none;">'
var children = data[i].nodes;
for (var j = 0; j < children.length; j++) {
html += '<li><a href="' + children[j].href + '?id=' + children[j].id + '" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i>' + children[j].title + '</a></li>';
}
html += '</ul></li>';
}
else {
html += '<li><a href="' + data[i].href + '"><i class="fa fa-dashboard"></i> <span>' + data[i].title + '</span></a></li>';
}
}
$("#" + menuid + "").html(html);
}
}
);
}
};
$.findChartJsons = function () {
var id = $.getQueryStringByName('id');
var jsons = [];
function findcharts(obj) {
for (var i = 0; i < obj.length; i++) {
if (obj[i].id == id) {
jsons.push(obj[i]);
}
else {
findcharts(obj[i].nodes);
}
}
}
findcharts($.configMenu);
return id ? jsons[0].nodes : undefined;
};
$.iniMenu("sidebar-menu");
})(window, $)

anjular-tree设置模块

(function () {
'use strict';
angular.module('treeApp', ['ui.tree'])
.controller('treeCtrl', function ($scope, $http) {
$scope.load = function (scope) {
$http({
method: 'get',
url: '/getmenu'
}).success(function (data, status) {
var arr = [];
arr.push(data);
$scope.data = arr;
}).error(function (data, status) {
console.log(data);
console.log(status);
});
};
$scope.remove = function (scope) {
//                            $scope.currentModel=null;
};
$scope._setChartObj = function (currentModel) {
var commonproperty = ['id', 'title', 'nodes', 'charttype', 'showtype', 'host', 'searchurl', 'maindivDOMHeight', 'maindivDOMWidth', 'maindivDOMId', 'tableDOMWidth', 'tableDOMId', 'groupColumnIndex', 'showDataName', 'showDataValue', 'queryString', 'searchUrl','lengendrange'];
if (currentModel.charttype) {
currentModel[currentModel.charttype] = {};
for (var key in currentModel) {
if (currentModel.hasOwnProperty(key) && commonproperty.indexOf(key) == -1) {
if (key != currentModel.charttype) {
currentModel[currentModel.charttype][key] = currentModel[key];
currentModel[key] = undefined;
}
}
}
}
}
$scope.edit = function (scope) {
$scope.currentModel = {};
angular.extend($scope.currentModel, scope.$modelValue);
$scope.currentModel.showtype = '模块';
var subdepth = scope.maxSubDepth();
var thisdepth = scope.depth();
if ((thisdepth == 2 && subdepth <= 1) || (thisdepth > 2 && subdepth == 1)) {
$scope.currentModel.href = $scope.currentModel.href || '/';
$scope.currentModel.showtype = '页面';
}
else if (subdepth == 0) {
$scope.currentModel.showtype = '图表';
$scope.currentModel.host = '';
$scope.currentModel.searchurl = '';
$scope._setChartObj($scope.currentModel);
}
}
$scope.log = function (scope) {
console.log($scope.data);
}
$scope.save = function (scope) {
function updateData(inputobj, savaobj) {
if (inputobj.id == savaobj.id) {
angular.extend(inputobj, savaobj);
}
else {
for (var i = 0; i < inputobj.nodes.length; i++) {
updateData(inputobj.nodes[i], savaobj);
}
}
}
if ($scope.currentModel) {
if ($scope.currentModel.charttype && $scope.currentModel[$scope.currentModel.charttype]) {
angular.extend($scope.currentModel, $scope.currentModel[$scope.currentModel.charttype]);
$scope.currentModel[$scope.currentModel.charttype] = undefined;
}
updateData($scope.data[0], $scope.currentModel);
$scope._setChartObj($scope.currentModel);

}
console.log(JSON.stringify($scope.data));
}
$scope.toggle = function (scope) {
scope.toggle();
};

$scope.moveLastToTheBeginning = function () {
var a = $scope.data.pop();
$scope.data.splice(0, 0, a);
};
$scope.newSubItem = function (scope) {
var thisdepth = scope.depth();
if (thisdepth <= 3) {
$scope.currentModel = null;
var nodeData = scope.$modelValue;
nodeData.nodes.push({
id: nodeData.id * 10 + nodeData.nodes.length,
title: nodeData.title + '.' + (nodeData.nodes.length + 1),
nodes: []
});
}
};
$scope.collapseAll = function () {
$scope.$broadcast('collapseAll');
};
$scope.expandAll = function () {
$scope.$broadcast('expandAll');
};
$scope.data = [
{
"id": 1,
"title": "模块",
"nodes": []
}
];
$scope.update = function () {

$http({
data: {"menu": $scope.data},
method: 'post',
url: '/updatemenu'
}).success(function (data, status) {

if (data == 'success') {
alert('更新成功');
}
else {
alert('更新失败')
}
}).error(function (data, status) {
console.log(data);
console.log(status);
alert('更新失败');
});
}
});
})();

加载图表代码

/**
* Created by cuidapeng on 14-12-3.
*/

var echarts;
var allchartjson = $.findChartJsons();
var allchartobj = [];
if (allchartjson) {
for (var i = 0; i < allchartjson.length; i++) {
var queryobj = $.createChartObj(allchartjson[i]);
if (queryobj) allchartobj.push(queryobj);
}
}

$(document).ready(function () {
for (var i = 0; i < allchartobj.length; i++) {
var queryobj = allchartobj[i];
queryobj.iniDom('initest');
queryobj.iniTable();
queryobj.bindEvent();
}
$('#search').click(function () {
$.Prompt("正在加载，请稍后");
var alldate = $('#datepicker-calendar').DatePickerGetDate();
var allmedianames = $("#myTags").tagit("assignedTags");
for (var i = 0; i < allchartobj.length; i++) {
var queryobj = allchartobj[i];
queryobj.datebegin = alldate[0][0];
queryobj.dateend = alldate[0][1];
var ajaxurlpar = '?medianames=' + allmedianames;
queryobj.loadData(ajaxurlpar);
}
//        $.Prompt({close:true});
});
var lastcompletedata;
//tags
$("#myTags").tagit({
beforeTagAdded: function (event, ui) {
if (!lastcompletedata || lastcompletedata.indexOf(ui.tagLabel) == -1) {
return false;
}
},
autocomplete: {delay: 0, minLength: 2, source: function (request, response) {
console.log(request);
$.get('/media/ajaxautomedia', {input: request.term}, function (data, status) {
console.log(this);
lastcompletedata = data;
response(data);
}
);
}}
});
});