您的位置:首页 > Web前端 > JavaScript

arcgis api for js之echarts开源js库实现地图统计图分析

2017-12-22 21:11 519 查看
前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html

那是基于dojo组件来实现图表统计的,实现的效果一般般;所以,本篇利用arcgis api for js结合echarts实现统计图效果,效果比之前好看,效果图如下:





实现的思路如下:

1.自定义气泡窗口ChartInfoWindow,继承InfoWindowBase,为了echarts统计图表展示在自定义的气泡窗口里面;自定义气泡窗口ChartInfoWindow是为了适应地图上同时展示多个图表,地图默认的气泡窗口只能显示一个,不能同时显示多个的;

2.定义ChartInfoWindow的样式,具体样式如下:

.myInfoWindow {
position: absolute;
z-index: 100;
-moz-box-shadow: 0 0 1em #26393D;
font-family: sans-serif;
font-size: 12px;
background-color: rgba(255, 255, 255, 0);
}

/*.dj_ie .myInfoWindow {*/
/*border: 1px solid rgba(255, 255, 255, 0);*/
/*}*/

.myInfoWindow .content {
position: relative;
color:#002F2F;
overflow: auto;
padding:2px 2px 2px 2px;
background-color: rgba(255, 255, 255, 0);
}


3.构造模拟数据:

//echarts统计图表模拟数据
jsonBarData: [
{ GDP1: 13414, GDP2: 32684, GDP3: 235687, GDP4: 236598, GDP5: 86549, UNIT: "万元", x: 121.988, y: 39.094 },
{ GDP1: 34514, GDP2: 52684, GDP3: 135687, GDP4: 96598, GDP5: 106549, UNIT: "万元", x: 121.844, y: 39.481 },
{ GDP1: 789014, GDP2: 42684, GDP3: 335687, GDP4: 86598, GDP5: 96549, UNIT: "万元", x: 122.191, y: 39.533 },
{ GDP1: 56414, GDP2: 122684, GDP3: 435687, GDP4: 136598, GDP5: 116549, UNIT: "万元", x: 122.476, y: 39.445 },
{ GDP1: 23414, GDP2: 92684, GDP3: 535687, GDP4: 436598, GDP5: 76549, UNIT: "万元", x: 122.651, y: 39.979 }
],
jsonPieData: [
{ GDP1: 89414, GDP2: 82684, GDP3: 635687, GDP4: 536598, GDP5: 66549, UNIT: "万元", x: 121.639, y: 39.563 },
{ GDP1: 111414, GDP2: 62684, GDP3: 735687, GDP4: 636598, GDP5: 126549, UNIT: "万元", x: 121.891, y: 39.229 },
{ GDP1: 23614, GDP2: 72684, GDP3: 835687, GDP4: 736598, GDP5: 136549, UNIT: "万元", x: 122.211, y: 39.813 },
{ GDP1: 93414, GDP2: 132684, GDP3: 935687, GDP4: 126598, GDP5: 146549, UNIT: "万元", x: 122.614, y: 39.652 },
{ GDP1: 63414, GDP2: 222684, GDP3: 145687, GDP4: 116598, GDP5: 156549, UNIT: "万元", x: 123.144, y: 39.865 }
],


4.创建柱状图以及饼状图部分代码:

loadChartBarOnMap: function (map, width, height) {
require([
"esri/geometry/Point",
//添加自定义类型的引用
"CustomModules/ChartInfoWindow",
"dojo/_base/array",
"dojo/dom-construct",
"dojo/_base/window",
"dojo/domReady!"
], function (
Point, ChartInfoWindow, array, domConstruct, win
) {

for (var i = 0; i < DCI.chart.jsonBarData.length; i++) {
var chartData = null;
chartData = [];
var nodeChart = null;
nodeChart = domConstruct.create("div", { id: "nodeTestBar" + i, style: "width:" + width + "px;height:" + height + "px;" }, win.body());
var myChart = echarts.init(document.getElementById("nodeTestBar" + i));
//柱状图
var option = {
tooltip: {
show: true
},
grid: {*/
x: '40%',
x2: '1%',
y: '10%',
y2: '1%',
borderWidth: '0'//网格边框

},
xAxis: [
{
type: 'category',
splitLine: { show: false, },//网格线
data: ["13年", "14年", "15年", "16年", "17年"],
axisLabel: {//颜色字体
show: true,
//rotate:30,
textStyle: {
color: 'rgba(0,0,0,0.6)'
}
},
axisTick: {//x轴刻度
show: false
}
}
],
yAxis: [
{
type: 'value',
splitLine: { show: false, },//网格线
name: '(万元)',
axisLabel: {//颜色字体
show: true,
textStyle: {
color: 'rgba(0,0,0,0.6)'
}
}
}
],
series: [
{
"name": "生产总值",
"type": "bar",
"barWidth": 8,
//itemStyle: {normal: {color: '#2466c9'}},//设置颜色
"data": [DCI.chart.jsonBarData[i].GDP1,
DCI.chart.jsonBarData[i].GDP2,
DCI.chart.jsonBarData[i].GDP3,
DCI.chart.jsonBarData[i].GDP4,
DCI.chart.jsonBarData[i].GDP5]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
var chartPoint = null;
chartPoint = new Point(DCI.chart.jsonBarData[i].x, DCI.chart.jsonBarData[i].y, MapConfig.mapInitParams.spatialReference);
var chartInfo = new ChartInfoWindow({
map: map,
chart: nodeChart,
chartPoint: chartPoint,
width: width+30,
height: height+25
});
}

});
},
loadChartPieOnMap: function (map, width, height) {
require([
"esri/geometry/Point",
//添加自定义类型的引用
"CustomModules/ChartInfoWindow",
"dojo/_base/array",
"dojo/dom-construct",
"dojo/_base/window",
"dojo/domReady!"
], function (
Point, ChartInfoWindow, array, domConstruct, win
) {
for (var i = 0; i < DCI.chart.jsonPieData.length; i++) {
var chartData = null;
chartData = [];
var nodeChart = null;
nodeChart = domConstruct.create("div", { id: "nodeTestPie" + i, style: "width:" + width + "px;height:" + height + "px;" }, win.body());
var myChart = echarts.init(document.getElementById("nodeTestPie" + i));
//饼状图
option = {
tooltip: {
trigger: 'item',
z: 999,
formatter: "{a}(万元) <br/>{b} : {c} ({d}%)"
},
calculable: false,
series: [
{
name: "生产总值",
type: "pie",
radius: "30%",
center: ["50%", "60%"],
data: [
{ value: DCI.chart.jsonBarData[i].GDP1, name: "13年" },
{ value: DCI.chart.jsonBarData[i].GDP2, name: "14年" },
{ value: DCI.chart.jsonBarData[i].GDP3, name: "15年" },
{ value: DCI.chart.jsonBarData[i].GDP4, name: "16年" },
{ value: DCI.chart.jsonBarData[i].GDP5, name: "17年" }
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
var chartPoint = null;
chartPoint = new Point(DCI.chart.jsonPieData[i].x, DCI.chart.jsonPieData[i].y, MapConfig.mapInitParams.spatialReference);
var chartInfo = new ChartInfoWindow({
map: map,
chart: nodeChart,
chartPoint: chartPoint,
width: width+5,
height: height+25
});
}
});
},
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: