/*开发人员：陈献斌
|
*
|
* 开发日期：2017-8-4
|
*/
|
|
define(['esri/graphic', 'dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array',
|
'dojo/_base/html', 'dojo/topic', 'dojo/Deferred', 'dojo/on'],
|
function (g, declare, lang, array, html, topic, Deferred, on) {
|
var MaxEChartObj = null; echarts = null;
|
f = declare(g, {
|
constructor : function(options) {
|
dojo.mixin(this, options);
|
this._chartOption = options.chartOption;
|
this._cacheID = null;
|
this.parentDiv = null;
|
this.currentEChart = null;
|
this._chartOption = options.chartOption;
|
this._divWidth = options.width;
|
this._divHeight = options.height;
|
if (echarts == null) {
|
require(['./scripts/widget/echarts.min.js'], function (echart) {
|
echarts = echart;
|
});
|
}
|
},
|
|
setChartOption : function(LayerRender) {
|
if (this.getChartType() != "tongjibiao") {
|
if (LayerRender) {
|
if (LayerRender.labelField) {
|
if (this.attributes.hasOwnProperty(LayerRender.labelField)) {
|
this._chartOption.title.text = this.attributes[LayerRender.labelField];
|
}
|
}
|
|
if (LayerRender.classfyFields) {
|
var data = [];
|
var colors = [];
|
|
for (var i = 0; i < LayerRender.classfyFields.length; i++) {
|
var pieColorList = LayerRender.classfyFields[i].data;
|
|
for (var j = 0; j < pieColorList.length; j++) {
|
var pieColor = pieColorList[j].pieColor;
|
|
if (pieColor) {
|
colors.push(pieColor);
|
}
|
}
|
}
|
|
if (colors.length > 0) {
|
this._chartOption.color = colors;
|
}
|
}
|
}
|
}
|
},
|
|
getChartOption : function() {
|
return this._chartOption;
|
},
|
|
CreateChart : function(divContainer,CityName) {
|
if (this.getChartType() == "tongjibiao") {//统计表
|
var TableData = this.getTableData();
|
if (TableData != null) {
|
var model = this.getChartOption();
|
var ZiYuanMC = this.getZiYuanMC();
|
var data = TableData[0].data;
|
var width = this.getDivWidth();
|
var height = this.getDivHeight();
|
var arrowTop = 0;
|
arrowTop = (height == null || height == "") ? 0 : height / 2;
|
var thead = "";
|
var borderColor = "black";
|
var th = "";
|
if (model != null) {
|
if (model.th != null) {
|
th = model.th;
|
}
|
if (model.borderColor != null) {
|
borderColor = model.borderColor;
|
}
|
}
|
if (ZiYuanMC == null || ZiYuanMC == "") {
|
ZiYuanMC = CityName;
|
}
|
if (th != null) {//构造表头
|
thead = "<tr style=\"background-color:#D6EBFE;\">";
|
for (var i = 0; i < th.length; i++) {
|
thead += "<th style=\"padding:2px;vertical-align: top;border-left: 1px solid " + borderColor + ";text-align:center;font-weight:bold;\">" + th[i] + "</th>";
|
}
|
thead += "</tr>";
|
}
|
var tbody = "";
|
for (var i = 0; i < data.length; i++) {//构造表数据
|
if (i % 2 == 0) {
|
tbody += "<tr style=\"background-color:#E4FAFF;\">";
|
} else {
|
tbody += "<tr style=\"background-color:#E4FAFF;\">";
|
}
|
for (var j = 0; j < data[i].length; j++) {
|
tbody += "<td style=\"padding:2px;vertical-align: top;border-left: 1px solid " + borderColor + ";border-top: 1px solid " + borderColor + ";\">" + data[i][j] + "</td>";
|
}
|
tbody += "</tr>";
|
}
|
var div = html.create('div', {
|
'style' : 'border: 0 none;padding: 0;background: #fff;box-shadow: 0 -1px 1px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.25);border-radius: 2px;'
|
}, divContainer);
|
var span = html.create('span', {
|
'style' : 'position: absolute;right: -23px;top: ' + arrowTop + 'px;border-width: 12px;border-style: solid dashed dashed;border-color:transparent transparent transparent #3892d3;'
|
}, div);
|
var em = html.create('em', {
|
'style' : 'position: absolute;right: -21px;top: ' + arrowTop + 'px;border-width: 12px;border-style: solid dashed dashed;border-color:transparent transparent transparent #ffffff;'
|
}, div);
|
var title = html.create('div', {
|
'style' : 'height:auto;',
|
'innerHTML' : '<div style="background: #3892d3;color: #2b2e34;font-size: 18px;line-height: 20px;padding: 4px 12px;-webkit-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;cursor: default;border: 0;border-bottom: 1px solid #d0d0d0;"><div style="color:white;font-size:15px;">' + ZiYuanMC + '</div></div>'
|
}, div);
|
var content = html.create('div', {
|
'style' : 'position: relative;overflow: auto;padding: 0px 1px;background: #fff;border: 0;border-top: 0 none;border-bottom: 0 none;'
|
}, div);
|
var table = html.create('table', {
|
'style' : 'border: 1px solid ' + borderColor + ';border-collapse: separate;*border-collapse: collapse;border-left: 0;text-align:center;width:100%;',
|
'cellpadding' : '0',
|
'border' : '0',
|
'cellspacing' : '0',
|
'innerHTML' : thead + tbody
|
}, content);
|
}
|
} else {//统计图
|
var options = this.getChartOption();
|
|
if (options) {
|
var myChart = echarts.init(divContainer);
|
|
on(divContainer, 'dblclick', lang.hitch(this, lang.partial(this.showMaxEChart, options)));//新增Div双击事件
|
if(options.xAxis){
|
//dojo.style(myChart._dom.children[0],{"background-color":"#fff !important"});
|
myChart._dom.children[0].style.backgroundColor = "#ffffff";
|
}
|
myChart.setOption(options);
|
this.currentEChart = myChart;
|
}
|
}
|
},
|
drawPie : function() {
|
if (this._divWidth && this._divHeight) {
|
var piegraphic = this;
|
var bindGraphic = this;
|
var zoomFlag = false;
|
|
if (bindGraphic._shape) {
|
var pos = this._layer._map.toScreen(bindGraphic.geometry);
|
var xoffset = 0 - this._divWidth / 2;
|
var yoffset = 0 - this._divHeight / 2;
|
var left = pos.x + xoffset + "px";
|
var top = pos.y + yoffset + "px";
|
var constWidth = this._divWidth;
|
//获取自定义图表宽度
|
var constHeight = this._divHeight;
|
//获取自定义图表图高度
|
if (!piegraphic.parentDiv || zoomFlag) {
|
var piediv = dojo.create("div");
|
|
dojo.style(piediv, {
|
"left" : left,
|
"top" : top,
|
"position" : "absolute",
|
"width" : constWidth + "px",
|
"height" : constHeight + "px",
|
"margin" : "0px",
|
"padding" : "0px",
|
"z-index" : "10"
|
});
|
|
dojo.byId(map.root.id).appendChild(piediv);
|
this.CreateChart(piediv,bindGraphic.attributes.NAME);
|
piegraphic.parentDiv = piediv;
|
|
} else if (piegraphic.parentDiv) {
|
dojo.style(piegraphic.parentDiv, {
|
"left" : left,
|
"top" : top,
|
"position" : "absolute",
|
"width" : constWidth + "px",
|
"height" : constHeight + "px",
|
"margin" : "0px",
|
"padding" : "0px",
|
"z-index" : "10"
|
});
|
}
|
}
|
}
|
},
|
|
removePie : function() {
|
if (this.parentDiv) {
|
dojo.destroy(this.parentDiv);
|
//this.parentDiv.removeNode();
|
this.parentDiv = null;
|
if (this.currentEChart) {
|
this.currentEChart.dispose();
|
this.currentEChart = null;
|
}
|
}
|
},
|
|
getDivHeight : function() {
|
return this.divHeight;
|
},
|
getDivWidth : function() {
|
return this.divWidth;
|
},
|
getChartOption : function() {
|
return this.chartOption;
|
},
|
|
getChartType : function() {
|
return this.chartType;
|
},
|
getxAxisLabel : function() {
|
return this.xAxisLabel;
|
},
|
|
getTableData : function(TableData) {
|
return this.tableData;
|
},
|
getZiYuanMC : function() {
|
return this.ZiYuanMC;
|
},
|
//展示放大版统计图
|
showMaxEChart: function (options) {
|
var thisoptions = lang.clone(options);//吕焕龙 防止第二次查看大版时，宽度被重复* 2.5，保证原来的options.series[i].radius不变。
|
var showDiv = document.getElementById("ShwoEChartDiv");
|
if (!showDiv) {
|
showDiv = html.create("div", {
|
"style": "width:500px;height: 480px;margin: 0px auto 0px auto;background-color: white;border: 1px solid #3892d3;position: absolute;left: 0px;;z-index: 11;border-top-left-radius:5px;border-top-right-radius:5px;",
|
"id": "ShwoEChartDiv"
|
}, dojo.byId(map.root.id));
|
} else {
|
if (showDiv.style.display == "") {
|
showDiv.innerHTML = "";
|
MaxEChartObj.dispose();
|
MaxEChartObj = null;
|
} else {
|
showDiv.style.display = "";
|
}
|
}
|
|
var TitleDiv = html.create("div", {
|
"style": "width: 500px;height:30px;background-color:#3892d3;border-top-left-radius:2px;border-top-right-radius:2px;"
|
}, showDiv);
|
var div = html.create("div", {
|
"style": "color:white;float:left;margin:7px 10px;"
|
}, TitleDiv);
|
div.innerHTML = thisoptions.xzqhName;
|
var Img = html.create("img", {
|
"src": "../images/portlet-remove-icon.png",
|
"style": "margin:7px 10px;cursor:pointer;float:right;",
|
"title": "关闭"
|
}, TitleDiv);
|
on(Img, 'click', lang.hitch(this, lang.partial(this.hideMaxEChart)));
|
var EChartDiv = html.create("div", {
|
"style": "width: 500px;height: 450px;"
|
}, showDiv);
|
//直角坐标系左右边距调整
|
if (thisoptions.grid) {
|
if (thisoptions.grid.left && thisoptions.grid.left < 50) {
|
thisoptions.grid.left = 50;
|
}
|
if (thisoptions.grid.right && thisoptions.grid.right < 50) {
|
thisoptions.grid.right = 50;
|
}
|
}
|
//嵌套饼状图宽度处理
|
for (var i = 0; i < thisoptions.series.length; i++) {
|
if (thisoptions.series[i].type == "pie") {
|
if (thisoptions.series[i].radius && thisoptions.series[i].radius.length == 2) {
|
var min = thisoptions.series[i].radius[0] * 2.5;
|
var max = thisoptions.series[i].radius[1] * 1.5;
|
thisoptions.series[i].radius = [min, max];
|
}
|
}
|
}
|
MaxEChartObj = echarts.init(EChartDiv);
|
MaxEChartObj.setOption(thisoptions);
|
|
MaxEChartObj.on("click", lang.hitch(this, function (param) {
|
var features = this._layer._YwjcObject.features;
|
if (features) {
|
var feature = features[param.dataIndex];
|
if (feature.geometry && feature.geometry.type == "point") {
|
if (feature.attributes["LEVEL_MIN"]) {
|
this._layer._map.centerAndZoom(feature.geometry, feature.attributes["LEVEL_MIN"]);
|
}
|
else {
|
this._layer._map.centerAt(feature.geometry);
|
}
|
}
|
}
|
}));
|
this._layer.clear();
|
this._layer.hide();
|
//this._layer.update();
|
},
|
//隐藏放大版统计图
|
hideMaxEChart: function () {
|
var showDiv = document.getElementById("ShwoEChartDiv");
|
if (showDiv) {
|
MaxEChartObj.dispose();//销毁ECharts对象
|
MaxEChartObj = null;
|
showDiv.style.display = "none";//隐藏弹窗
|
showDiv.innerHTML = "";//清空弹窗内容
|
}
|
this._layer.show();
|
this._layer.refresh();
|
}
|
});
|
return f;
|
});
|
