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);
                }
            );
        }}
    });
});