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 datefunction 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]});}elseseries[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);});}}});
});

转载于:https://www.cnblogs.com/zihunqingxin/p/4435822.html

echart封装,前端简单路由,图表设置自动化相关推荐

  1. Javascript实现前端简单路由

    http://www.helloweba.com/view-blog-385.html WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由.后端路由在很多框架中是一个重要的模块,如Thin ...

  2. 手写---前端简单路由

    本文路由呈现以hash形式,当URL中的hash值发生变化时,监听hashchange,触发回调函数,再在回调函数中进行不同的操作,进行不同内容的展示 <ul><li>< ...

  3. html5封装图片,简单封装前端上传文件/图片

    前言 最近项目会一直用到各种类型的上传文件的功能, 所以就基于elment-ui简单的做了一个封装, 比较好用 正文 引入 import TestUpload from '../components/ ...

  4. echart vue 图表大小_vue之将echart封装为组件

    最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用.本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为 ...

  5. centos 重启网卡_CentOS6 网络管理之网卡配置及简单路由设置

    CentOS6中关于网络配置的命令有很多,本文将介绍几个平时最长用的几个命令,以及网卡IP地址的配置和简单路由配置. 1.经常使用的查看IP地址命令为 ifconfig,不跟参数的情况下默认查看所有已 ...

  6. 前端绘制绘制图表_绘制图表(第2页):JavaScript图表库的比较

    前端绘制绘制图表 by Mandi Cai 蔡曼迪 绘制图表(第2页):JavaScript图表库的比较 (Charting the waters (pt. 2): a comparison of J ...

  7. android自动路由,GitHub - greatzi/RouterKit: 又一个路由库;Android平台对页面、服务的路由框架。自动化且易用。...

    Jet RouterKit 路由库:Android平台对页面.服务的路由框架.自动化且易用. 基于APT技术(注解-编译时生成代码,不反射,无性能损耗),通过注解方式来实现URL打开Activity功 ...

  8. # Vue 配置前端后端路由地址

    Vue 配置前端后端路由地址 前端路由配置 配置项目地址 修改 config/index.js的配置文件 proxyTable: {'/api': { //使用"/api"来代替t ...

  9. 封装原声ajax,原生AJAX封装的简单实现

    回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出! var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function ( ...

最新文章

  1. 自2018年以来我不知道的事情-Dan Abramov
  2. 【面试招聘】据说这里有一份关于BAT的 “宝藏级” 面试记录终于可以看了!...
  3. 打用户断点_如何快速测出线缆断点 ?一文了解清楚
  4. python os.walk
  5. 关于 asp.net 点击确定按钮 获取不到新值问题
  6. oracle 安装ora 27102,ORA-27102 解决办法
  7. Mac电脑如何从视频中提取帧并将其保存为图像
  8. linux中高危端口,关闭高危端口方法[转载]
  9. MUI框架常用代码段
  10. 【Java加密】JCA体系结构
  11. Dissect Eclipse Plugin Framework
  12. SQL SERVER 远程主机强迫关闭一个现有连接
  13. 班级聚会(reunion)
  14. Maven+Nexus私服搭建
  15. LTO助推磁带大容量存储技术超越磁盘HDD
  16. 何时是PNE(纯策略纳什均衡)?何时是MNE(混合策略纳什均衡)?
  17. revit二次开发 材质相关
  18. matlab数学实验报告西安交通大学微分方程模型高为16米,数学实验第二次作业——常微分方程数值求解...
  19. Delphi ListView的用法(常用技巧) 作者:蓝色忧郁
  20. 【数字化】数字化转型是什么、为什么、怎么办;2018年数字化供应链行业及案例分析报告

热门文章

  1. 深度学习——你需要了解的八大开源框架
  2. 开发者和程序员需要关注的42个播客
  3. 分享一百多套开发视频教程的下载地址(转)
  4. 远程桌面连接超出最大连接数的问题
  5. 批处理-取年月日、时分秒毫秒
  6. 《CUDA C编程权威指南》——3.4 避免分支分化
  7. 使用 Git 改进工作方式
  8. JavaScript- The Good Parts CHAPTER 2
  9. rsync+inotify的实现
  10. jQuery.Validate 验证