define([
|
"dojo",
|
"dojo/_base/declare",
|
"dojo/_base/lang",
|
"base/BaseWidget",
|
"dojo/text!widgets/echarts/template.html",
|
"widgets/echarts/config",
|
"base/AppEvent",
|
"base/ConfigData",
|
"dojo/dom",
|
"dojo/dom-construct",
|
"dojo/dom-attr",
|
"dojo/dom-style",
|
"dojo/on",
|
"esri/layers/FeatureLayer",
|
"controls/tab/TabControl",
|
"esri/dijit/SymbolStyler",
|
"esri/styles/basic",
|
"dojo/_base/array",
|
"esri/tasks/QueryTask",
|
"esri/tasks/query",
|
"jslibs/echarts.min",
|
"esri/Color",
|
"esri/symbols/TextSymbol",
|
"esri/symbols/Font",
|
"esri/tasks/StatisticDefinition",
|
"dojo/domReady!"
|
], function (dojo,
|
declare,
|
lang,
|
BaseWidget,
|
template,
|
config,
|
AppEvent,
|
ConfigData,
|
dom,
|
domConstruct,
|
domAttr,
|
domStyle,
|
on,
|
FeatureLayer,
|
TabControl,
|
SymbolStyler,
|
basic,
|
arrayUtils,
|
QueryTask,
|
Query,
|
echarts,
|
Color,
|
TextSymbol,
|
Font,
|
StatisticDefinition) {
|
var Widget = declare([BaseWidget], {
|
widgetName: "echartsWidget",
|
label: "统计图表",
|
templateString: template,
|
_map: null,
|
_tabControl: null,
|
_styler: null,
|
_selectLayer: null,
|
_printer: null,
|
_openprinturl: null,
|
echartsObj: null,
|
XZQ: null,
|
XZQfeatures: null,
|
et: null,
|
constructor: function (options, srcRefNode) {
|
this._map = options.map;
|
},
|
postCreate: function () {
|
},
|
startup: function () {
|
this.inherited(arguments);
|
echartsObj = this;
|
echartsObj._buildLayerTree();
|
AppEvent.addAppEventListener("menuclick", lang.hitch(this, function (evt) {
|
echartsObj.et = evt;
|
$("#bg").show();
|
if (echartsObj.XZQfeatures == null) {
|
echartsObj._getXZQ();
|
return;
|
}
|
$("#barh1").html(evt.name + $("#statistics-item option:selected").text() + "统计情况");
|
echartsObj._getdata(evt.data);
|
}));
|
AppEvent.addAppEventListener("showDetails", lang.hitch(this, function (evt) {
|
echartsObj.et = evt;
|
$("#bg").show();
|
$("#barh1").html(evt.name + evt.conditionValue + $("#statistics-item option:selected").text() + "统计情况");
|
echartsObj._showDetails();
|
}));
|
},
|
//绑定统计面板事件
|
_buildLayerTree: function () {
|
//绑定打开按钮事件
|
on(dom.byId("below_bar"), "click", function () {
|
var echartsdiv = $("#echartsWidget");
|
if (echartsdiv.height() == 0) {
|
$("#below_bar").hide();
|
echartsdiv.height('100%');
|
}
|
});
|
//隐藏按钮事件
|
on(dom.byId("hide_bar"), "click", function () {
|
var echartsdiv = $("#echartsWidget");
|
if (echartsdiv.height() != 0) {
|
$("#below_bar").show();
|
echartsdiv.height(0);
|
}
|
});
|
// $('#condition1').change(function () {
|
// if ($('#statistics-item option:selected').attr('data')) {
|
// AppEvent.dispatchAppEvent("menuclick", {
|
// name: $('.statistics-layer-input').val(),
|
// path: $('.statistics-layer-input').attr('data'),
|
// item: $('#statistics-item option:selected').attr('data')
|
// });
|
// }
|
// });
|
// $('#condition2').change(function () {
|
// if ($('#statistics-item option:selected').attr('data')) {
|
// AppEvent.dispatchAppEvent("menuclick", {
|
// name: $('.statistics-layer-input').val(),
|
// path: $('.statistics-layer-input').attr('data'),
|
// item: $('#statistics-item option:selected').attr('data')
|
// });
|
// }
|
// });
|
},
|
//查询18个行政区
|
_getXZQ: function () {
|
echartsObj.XZQfeatures = ConfigData.XZQfeatures;
|
if (echartsObj.XZQfeatures != null) {
|
echartsObj.XZQ = {city: [], county: []};
|
for (var i = 0; i < echartsObj.XZQfeatures.length; i++) {
|
echartsObj.XZQ.city.push({
|
name: echartsObj.XZQfeatures[i].attributes["CITY"]
|
});
|
}
|
AppEvent.dispatchAppEvent("menuclick", {
|
name: echartsObj.et.name,
|
url: echartsObj.et.url,
|
data: echartsObj.et.data
|
});
|
} else {
|
var queryTask = new QueryTask(ConfigData.XZQUrl);
|
var query = new Query();
|
query.returnGeometry = false;
|
query.outFields = ["*"];
|
query.orderByFields = ["CITY_GB"];
|
query.where = "1=1";
|
queryTask.execute(query, function (results) {
|
ConfigData.XZQfeatures = results.features;
|
echartsObj.XZQfeatures = ConfigData.XZQfeatures;
|
echartsObj.XZQ = {city: [], county: []};
|
for (var i = 0; i < echartsObj.XZQfeatures.length; i++) {
|
echartsObj.XZQ.city.push({
|
name: echartsObj.XZQfeatures[i].attributes["CITY"]
|
});
|
}
|
AppEvent.dispatchAppEvent("menuclick", {
|
name: echartsObj.et.name,
|
url: echartsObj.et.url,
|
data: echartsObj.et.data
|
});
|
}, function (error) {
|
console.log(error);
|
$("#bg").hide();
|
alert('获取行政区数据失败！');
|
});
|
}
|
},
|
//查询统计左侧子项信息
|
_showDetails: function () {
|
$.get(echartsObj.et.url + '?f=pjson', function (e) {
|
var displayField = JSON.parse(e).displayField;
|
AppEvent.dispatchAppEvent("clearcolor");
|
if ($('#bg').is(":hidden")) $('#bg').show();
|
var queryTask = new QueryTask(echartsObj.et.url);
|
var query = new Query();
|
// debugger
|
if ($('#statistics-condition').val() == '行政区') {//统计单元选择行政区时，则统计所选的市对应的县
|
query.where = "CITY LIKE '%" + echartsObj.et.conditionValue + "%'";//只查询指定的行政区
|
if (echartsObj.et.statisticsArea) {//添加查询范围
|
query.geometry = echartsObj.et.statisticsArea;
|
}
|
//添加统计参数
|
var statDefs = [];
|
for (var itemKey in echartsObj.et.statisticsCondition.item) {
|
var StatDef = new StatisticDefinition();
|
if (echartsObj.et.statisticsCondition.item[itemKey] == '湿地个数') {
|
StatDef.statisticType = "count";
|
StatDef.onStatisticField = displayField;
|
StatDef.outStatisticFieldName = "湿地个数";
|
} else {
|
StatDef.statisticType = "sum";
|
StatDef.onStatisticField = echartsObj.et.statisticsCondition.itemFields[itemKey];
|
StatDef.outStatisticFieldName = echartsObj.et.statisticsCondition.item[itemKey];
|
}
|
statDefs.push(StatDef);
|
}
|
query.groupByFieldsForStatistics = ['COUNTY'];
|
} else {
|
//判断统计单元是否经过了字典转换,如转换则进行逆转换
|
if (config.dictionary.hasOwnProperty($('#statistics-condition option:selected').attr('data'))) {
|
var dictionary = config.dictionary[$('#statistics-condition option:selected').attr('data')];
|
for (var dictionaryKey in dictionary) {
|
if (dictionary[dictionaryKey] == echartsObj.et.conditionValue) {
|
if (isNaN(dictionaryKey)){
|
echartsObj.et.conditionValue = dictionaryKey;
|
} else {
|
echartsObj.et.conditionValue = Number(dictionaryKey);
|
}
|
}
|
}
|
}
|
//只查询指定的类型
|
if (typeof (echartsObj.et.conditionValue)=='number'){
|
query.where = $('#statistics-condition option:selected').attr('data') + " = " + echartsObj.et.conditionValue;
|
} else {
|
query.where = $('#statistics-condition option:selected').attr('data') + " LIKE '%" + echartsObj.et.conditionValue + "%'";
|
}
|
|
if (echartsObj.et.statisticsArea) {//添加查询范围
|
query.geometry = echartsObj.et.statisticsArea;
|
}
|
//添加统计参数
|
var statDefs = [];
|
for (var itemKey in echartsObj.et.statisticsCondition.item) {
|
var StatDef = new StatisticDefinition();
|
if (echartsObj.et.statisticsCondition.item[itemKey] == '湿地个数') {
|
StatDef.statisticType = "count";
|
StatDef.onStatisticField = displayField;
|
StatDef.outStatisticFieldName = "湿地个数";
|
} else {
|
StatDef.statisticType = "sum";
|
StatDef.onStatisticField = echartsObj.et.statisticsCondition.itemFields[itemKey];
|
StatDef.outStatisticFieldName = echartsObj.et.statisticsCondition.item[itemKey];
|
}
|
statDefs.push(StatDef);
|
}
|
query.groupByFieldsForStatistics = ['CITY'];
|
}
|
query.returnGeometry = false;
|
query.outStatistics = statDefs;
|
queryTask.execute(query, function (results) {
|
if (results.features.length > 0) {
|
var data = results.features;
|
for (var dictionaryKey in config.dictionary) {//判断是否包括需要字典转换的属性，包括的话直接进行转换
|
data.map(function (value) {
|
if (value.attributes.hasOwnProperty(dictionaryKey)) {
|
value.attributes[dictionaryKey] = config.dictionary[dictionaryKey][value.attributes[dictionaryKey]];
|
return;
|
}
|
});
|
}
|
echartsObj.et.data = data;
|
echartsObj._getdata(data, 'showDetails');
|
$('#bg').hide();
|
} else {
|
$('#bg').hide();
|
}
|
}, function (er) {
|
console.log(er);
|
$('#bg').hide();
|
});
|
});
|
},
|
//查询图层，获取统计信息
|
_getdata: function (data, type) {
|
var classifyData = echartsObj._classifyFeatures(data, type);
|
//构造图表
|
echartsObj._bar(classifyData);
|
echartsObj._pie(classifyData);
|
$("#bg").hide();
|
},
|
//对数据进行分类，组装成需要的结构
|
_classifyFeatures: function (e, type) {//参数：统计结果、返回结果类型、统计条件、子项分类
|
if (type) {
|
var conditionField = $('#statistics-condition').val() == '行政区' ? 'COUNTY' : 'CITY';
|
} else {
|
var conditionField = $('#statistics-condition option:selected').attr('data');
|
}
|
var dataSorce = {};//临时存放处理后的统计结果
|
// if (!item) {
|
// //对数据进行排序，数值大的放在前面
|
// var i = 0,
|
// len = classifyData.length,
|
// j, d;
|
// var sn = "";
|
// for (; i < len; i++) {
|
// for (j = 0; j < len; j++) {
|
// if (Number(classifyData[i].data) < Number(classifyData[j].data)) {
|
// d = classifyData[j].data;
|
// sn = classifyData[j].name;
|
// classifyData[j].data = classifyData[i].data;
|
// classifyData[j].name = classifyData[i].name;
|
// classifyData[i].data = d;
|
// classifyData[i].name = sn;
|
// }
|
// }
|
// }
|
// }
|
dataSorce.xAxisData = [];//x坐标轴数据
|
dataSorce.datas = {};//各类型统计数据
|
e.map(function (item) {
|
dataSorce.xAxisData.push(item.attributes[conditionField]);
|
for (var itemKey in item.attributes) {
|
if (itemKey != conditionField) {//剔除统计单元项
|
var nu = itemKey == '湿地个数' ? 0 : 2;
|
if (dataSorce.datas.hasOwnProperty(itemKey)) {
|
var value = Number(Number(item.attributes[itemKey]).toFixed(nu));
|
dataSorce.datas[itemKey].push({name: item.attributes[conditionField], value: value});
|
} else {
|
dataSorce.datas[itemKey] = [];
|
var value = Number(Number(item.attributes[itemKey]).toFixed(nu));
|
dataSorce.datas[itemKey].push({name: item.attributes[conditionField], value: value});
|
}
|
}
|
}
|
});
|
|
//如果是按行政区统计，则应该将没有数据的行政区补0
|
if (conditionField == 'CITY') {
|
if (echartsObj.XZQfeatures.length != dataSorce.xAxisData.length) {//判断行政区个数是否相等
|
for (var xzQfeaturesKey in echartsObj.XZQfeatures) {//遍历查找出缺失的行政区
|
if (dataSorce.xAxisData.indexOf(echartsObj.XZQfeatures[xzQfeaturesKey].attributes.CITY) == -1) {
|
dataSorce.xAxisData.push(echartsObj.XZQfeatures[xzQfeaturesKey].attributes.CITY);//x轴数据补全行政区
|
for (var datasKey in dataSorce.datas) {//补全各项数据中缺失的行政区数据
|
dataSorce.datas[datasKey].push({
|
name: echartsObj.XZQfeatures[xzQfeaturesKey].attributes.CITY,
|
value: 0
|
});
|
}
|
}
|
}
|
}
|
}
|
return dataSorce;
|
},
|
//统计饼图
|
_pie: function (data) {
|
//先销毁上次生成的所有piedom
|
domConstruct.destroy('pie-container');
|
var pieContainer = domConstruct.create('div', {id: 'pie-container'}, 'main_pie');
|
var pieleft = domConstruct.create('div', {id: 'pie-left'}, pieContainer);
|
var pieright = domConstruct.create('div', {id: 'pie-right'}, pieContainer);
|
var pie = [];
|
on(pieleft, 'click', function () {
|
var prevdom = null;
|
$('.pie-dom-show').each(function (index, dom) {
|
$('.pie-dom-show').each(function (index, dom) {
|
if ($(dom).is(':visible')) {
|
if ($(dom).prev().index() > 1) {
|
prevdom = $(dom).prev();
|
$(dom).hide();
|
}
|
}
|
});
|
});
|
if (prevdom) {
|
prevdom.fadeIn('fast');
|
setTimeout(function () {
|
var domIndex = $(prevdom).index() - 2;
|
pie[domIndex * 2].resize();
|
pie[domIndex * 2 + 1].resize();
|
}, 50);
|
}
|
});
|
on(pieright, 'click', function () {
|
var nextdom = null;
|
$('.pie-dom-show').each(function (index, dom) {
|
if ($(dom).is(':visible')) {
|
if ($(dom).next().length > 0) {
|
nextdom = $(dom).next();
|
$(dom).hide();
|
}
|
}
|
});
|
if (nextdom) {
|
nextdom.fadeIn('fast');
|
setTimeout(function () {
|
var domIndex = $(nextdom).index() - 2;
|
pie[domIndex * 2].resize();
|
if (domIndex * 2 + 1 <= pie.length - 1) {
|
pie[domIndex * 2 + 1].resize();
|
}
|
}, 50);
|
}
|
});
|
var nowPieDom = domConstruct.create('div', {
|
class: 'pie-dom-show',
|
style: 'display:block'
|
}, pieContainer);
|
var index = 1;
|
for (var i in data.datas) {
|
if (i == '湿地个数') {
|
var unit = '个'
|
} else {
|
var unit = '公顷'
|
}
|
var pieoption = {
|
title: {
|
text: i + "比例情况(%)",
|
x: 'center',
|
top: '10px'
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: "",
|
formatter: "{b} :{c} " + unit + "<br>占比：{d}%"
|
},
|
legend: {
|
type: 'scroll',
|
orient: 'vertical',
|
right: '15px',
|
top: '50px',
|
bottom: '50px'
|
},
|
series: [{
|
name: '',
|
type: 'pie',
|
selectedMode: 'single',
|
label: {
|
normal: {
|
position: 'inside',
|
formatter: '{d}%'
|
}
|
},
|
labelLine: {
|
normal: {
|
smooth: 0.2,
|
length: 10,
|
length2: 10
|
}
|
},
|
radius: '70%',
|
center: ['40%', '50%'],
|
data: data.datas[i]
|
}]
|
};
|
if (index == 3) {
|
var nowPieDom = domConstruct.create('div', {
|
class: 'pie-dom-show'
|
}, pieContainer);
|
index = 1;
|
}
|
index++;
|
var pieDom = domConstruct.create('div', {
|
class: 'pie-dom',
|
}, nowPieDom);
|
var thispie = echarts.init(pieDom);
|
thispie.setOption(pieoption, true);
|
pie.push(thispie);
|
}
|
$(window).resize(function () {
|
setTimeout(function () {
|
pie.map(function (value) {
|
value.resize();
|
});
|
}, 500);
|
});
|
// myChart.on('mouseover', function (administrative) {
|
// var data = [];
|
// data.push({
|
// name: administrative.name,
|
// });
|
// echartsObj._mouseover(data);
|
// });
|
// myChart.on('mouseout', function () {
|
// echartsObj.graphic_border.clear();
|
// });
|
},
|
//统计柱状图
|
_bar: function (data) {
|
var series = [];
|
var legendData = [];
|
for (var datasKey in data.datas) {//填充数据，图斑个数使用折线
|
legendData.push(datasKey);
|
if (datasKey == '湿地个数') {
|
var type = 'line';
|
var yAxisIndex = 1;
|
} else {
|
var type = 'bar';
|
var yAxisIndex = 0;
|
}
|
series.push({
|
type: type,
|
// barWidth: 20,
|
name: datasKey,
|
label: {
|
normal: {
|
show: false
|
}
|
},
|
// itemStyle: {
|
// normal: {
|
// color: new echarts.graphic.LinearGradient(
|
// 0, 0, 0, 1,
|
// [
|
// {offset: 0, color: '#3bf15a'},
|
// {offset: 0.5, color: '#29c14e'},
|
// {offset: 1, color: '#00aa01'}
|
// ]
|
// )
|
// }
|
// },
|
data: data.datas[datasKey],
|
yAxisIndex: yAxisIndex
|
});
|
}
|
|
var baroption = {
|
legend: {
|
type: 'scroll',
|
orient: 'horizontal',
|
top: 20,
|
data: legendData
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
crossStyle: {
|
color: '#999'
|
}
|
}
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
magicType: {
|
type: ['stack', 'tiled']
|
}
|
}
|
},
|
textStyle: {
|
color: "#6b6b6b"
|
},
|
grid: {
|
left: '4%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
yAxis: [{
|
type: 'value',
|
name: '面积',
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'solid',
|
color: '#d7d7d7'
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#6b6b6b"
|
}
|
},
|
axisLabel: {
|
formatter: '{value} 公顷'
|
}
|
}, {
|
type: 'value',
|
name: '湿地个数',
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'solid',
|
color: '#d7d7d7'
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#6b6b6b"
|
}
|
},
|
axisLabel: {
|
formatter: '{value} 个'
|
}
|
}],
|
xAxis: [{
|
type: 'category',
|
data: data.xAxisData,
|
axisTick: {
|
show: true,
|
interval: 0//强制显示所有标签
|
},
|
axisLabel: {
|
show: true,
|
interval: 0//强制显示所有标签
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#6b6b6b"
|
}
|
},
|
axisPointer: {
|
type: 'shadow'
|
}
|
}],
|
series: series
|
};
|
var domMain = document.getElementById("main_bar");
|
var bar = echarts.init(domMain);
|
bar.setOption(baroption, true);
|
$(window).resize(function () {
|
setTimeout(function () {
|
bar.resize();
|
}, 500);
|
});
|
// myChart.on('mouseover', function (administrative) {
|
// var data = [];
|
// data.push({
|
// name: administrative.name,
|
// });
|
// echartsObj._mouseover(data);
|
// });
|
// myChart.on('mouseout', function () {
|
// echartsObj.graphic_border.clear();
|
// });
|
// $("#main_bar").unbind("mousemove").mousemove(function () {
|
// if ($($("#main_bar")[0].lastChild).is(":visible")){
|
// var target_name = $("#main_bar")[0].lastChild.firstChild.data;
|
// var data = [];
|
// data.push({
|
// name: target_name,
|
// });
|
// echartsObj._mouseover(data);
|
// } else {
|
// echartsObj.graphic_border.clear();
|
// }
|
// });
|
},
|
//统计表格
|
_table: function (countdata) {
|
var data = echartsObj._classifyFeatures(countdata, 'table', $('#condition1').val(), $('#condition2 option:selected').attr('data'));
|
var tableheight = $('.main_list').height();
|
var unit = echartsObj.et.item == '湿地个数' ? '(个)' : '(公顷)';
|
var columns;//设定列
|
var rows = [];//设定行
|
if (data.dimensions.length > 1) {//子项有分类
|
columns = [{
|
field: 'condition',
|
title: $('#condition1').val()
|
}, {
|
field: 'item',
|
title: $('#condition2').val()
|
}, {
|
field: 'value',
|
title: echartsObj.et.name + $("#statistics-item option:selected").text() + "统计详情" + unit
|
}];
|
for (var sourceKey in data.source) {
|
var condition = sourceKey;
|
for (var i = 0; i < data.source[sourceKey].length; i++) {
|
rows.push({
|
condition: condition,
|
item: data.dimensions[i + 1],
|
value: data.source[sourceKey][i]
|
});
|
}
|
}
|
} else {//子项没有分类
|
columns = [{
|
field: 'condition',
|
title: $('#condition1').val()
|
}, {
|
field: 'value',
|
title: echartsObj.et.name + $("#statistics-item option:selected").text() + "统计详情" + unit
|
}];
|
for (var sourceKey in data.source) {
|
rows.push({
|
condition: sourceKey,
|
value: data.source[sourceKey]
|
});
|
}
|
}
|
|
$('#content_list').bootstrapTable('destroy');
|
$('#content_list').bootstrapTable({
|
height: tableheight,
|
// showHeader:true,
|
columns: columns,
|
data: rows
|
});
|
|
$('.fixed-table-body').height(tableheight - 42);
|
//加载自定义滚动条
|
$(".fixed-table-body").mCustomScrollbar("destroy"); //清除滚动条
|
$(".fixed-table-body").mCustomScrollbar({
|
scrollButtons: {
|
enable: true, //是否添加 滚动条两端按钮支持 值:true,false
|
scrollType: "continuous", //滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动)
|
scrollSpeed: 50, //设置点击滚动按钮时候的滚动速度(默认 20)
|
scrollAmount: 60 //设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素
|
},
|
autoHideScrollbar: true,
|
horizontalScroll: false, //是否创建一个水平滚动条 默认是垂直滚动条
|
set_width: false, //：设置你内容的宽度 值可以是像素或者百分比
|
set_height: false, //：设置你内容的高度 值可以是像素或者百分比
|
mouseWheel: true, //鼠标滚动的支持 值为:true.false
|
});
|
},
|
});
|
return Widget;
|
});
|
