arcgis api for js之echarts開源js庫實現地圖統計圖分析
阿新 • • 發佈:2017-12-23
不能 rgba data ron 創建 apc att load reat
前面寫過一篇關於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 }); } }); },
arcgis api for js之echarts開源js庫實現地圖統計圖分析