大資料視覺化--全球分佈散點圖

阿新 • • 發佈：2019-01-08

//返回隨機顏色 function getColor() { var colors = ['#00F5FF','#00E5EE','#00FFFF','#00C5CD']; var index = Math.floor((Math.random() * colors.length)); return colors[index]; } require([ 'echarts' // 'echarts/chart/map',

// 'echarts/chart/scatter', // 'echarts/component/legend', // 'echarts/component/geo', // 'echarts/component/visualMap' ], function (echarts) { $.get('../map/json/world.json', function (worldJson) { echarts.registerMap('world'

, worldJson); var latlong = [ {'latitude':42.5, 'longitude':1.5}, {'latitude':22, 'longitude':116}, {'latitude':24, 'longitude':54}, {'latitude':24, 'longitude':54}, {'latitude':33

, 'longitude':65}, {'latitude':17.05, 'longitude':-61.8}, {'latitude':18.25, 'longitude':-63.1667}]; var chart = echarts.init(document.getElementById('main'), null, { }); var max = -Infinity; var min = Infinity; console.profile('setOption'); chart.setOption({ title : { x:'center', y:'top' }, tooltip : { trigger: 'item', formatter : function (params) { return ''; } }, visualMap: { show: false, min: 0, max: max, inRange: { symbolSize: [20, 20] } }, geo: { name: '', //型別 type: 'map', //地圖 map: 'world', roam: true, z:1, //圖形上的文字標籤,這裡不顯示 label: { emphasis: { show: false } }, //地圖區域的多邊形圖形樣式 itemStyle: { //普通狀態 normal: { areaColor: '#000', borderColor: '#1C86EE' }, //高亮狀態 emphasis: { color: 'rgba(0,191,255, 0.2)' } } }, series : [ { type: 'effectScatter', coordinateSystem: 'geo', //可以容納的動畫數量 animationThreshold:50000, //是否啟用圖例 hover 時的聯動高亮。 legendHoverLink:true, //特效型別，目前只支援漣漪特效'ripple' effectType:'ripple', //配置何時顯示特效，render表示渲染完就顯示 showEffectOn:'render', //漣漪特效相關配置，period:動畫的時間，scale：動畫中波紋的最大縮放比例，brushType：波紋的繪製方式，可選 'stroke' 和 'fill' rippleEffect:{'period':5, 'scale':3, 'brushType':'stroke'}, symbolSize:[2,10], symbolRotate :10, data: latlong.map(function (itemOpt) { return { value: [ itemOpt.longitude, itemOpt.latitude ], label: { emphasis: { show: false } }, itemStyle: { normal: { //color: getColor(), // 徑向漸變，前三個引數分別是圓心 x, y 和半徑，取值同線性漸變 color: { type: 'radial', x: 2, y: 2, r: 1, colorStops: [{ offset: 0, color: getColor() // 0% 處的顏色 }, { offset: 1, color: getColor() // 100% 處的顏色 }], globalCoord: false // 預設為 false } } }, z:2, }; }) } ] }); console.profileEnd('setOption'); }); });

大資料視覺化--全球分佈散點圖

大資料視覺化--全球分佈散點圖

視覺化庫-Matplotlib-散點圖(第四天)

從入門到精通，全球20個最佳大資料視覺化工具

大快搜索大資料視覺化平臺監控功能深度解析

5個常用的大資料視覺化分析工具，你知道嗎？

福利來了：39個大資料視覺化工具

55 個實用的大資料視覺化分析工具

大資料視覺化設計到底是啥，該怎麼用

大資料視覺化應用工具，主要有哪幾種？

能源管控系統開發，BI大資料視覺化管理分析平臺開發

社交媒體價值與教育大資料視覺化

企業級BI大資料視覺化分析軟體開發

商業智慧BI大資料視覺化分析系統開發

大資料視覺化BI商業智慧系統開發

大資料視覺化技術棧

大資料視覺化第三天——D3.js初探：餅形圖

大資料視覺化第二天——HTML、CSS、JavaScript、DOM、SVG

大資料視覺化第一天——前期準備

BI大資料分析大資料視覺化軟體系統開發

大資料視覺化及發展趨勢

大資料視覺化--全球分佈散點圖

相關推薦