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;
|
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)));
|
if (options.xAxis) {
|
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 = 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);
|
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();
|
},
|
hideMaxEChart: function () {
|
var showDiv = document.getElementById("ShwoEChartDiv");
|
if (showDiv) {
|
MaxEChartObj.dispose();
|
MaxEChartObj = null;
|
showDiv.style.display = "none";
|
showDiv.innerHTML = "";
|
}
|
this._layer.show();
|
this._layer.refresh()
|
}
|
});
|
return f
|
});
|
