Echarts
Echarts
杨林伟
像火箭科学家一样思考!
展开
-
269Echarts - GL 关系图(1w 节点 2w7 边的NPM 依赖图)
效果图源代码$.when( $.getJSON("data-gl/asset/data/npmdep.json"), $.getScript("vendors/echarts/extension/graph-modularity.js")).done(function (res) { var data = res[0]; var nodes = data.n...原创 2019-05-06 11:20:33 · 1468 阅读 · 0 评论 -
268Echarts - GL 关系图(GraphGL - Large Internet)
效果图源代码$.getJSON('data-gl/asset/data/internet.graph.json', function (graph) { var edges = graph.edges.map(function (edge) { return { source: edge[0], target: edg...原创 2019-05-06 11:19:37 · 1751 阅读 · 0 评论 -
267Echarts - GL 关系图(GraphGL GPU Layout)
效果图源代码function createNodes(widthCount, heightCount) { var nodes = []; for (var i = 0; i < widthCount; i++) { for (var j = 0; j < heightCount; j++) { nodes.push({...原创 2019-05-06 11:18:32 · 1546 阅读 · 0 评论 -
266Echarts - GL 矢量场图(Global Wind Visualization 2)
效果图源代码$.getJSON('data-gl/asset/data/gfs.json', function(windData) { buildGrid(windData, function(header, grid) { var data = []; var p = 0; var maxMag = 0; var mi...原创 2019-05-06 11:17:25 · 1158 阅读 · 1 评论 -
266Echarts - GL 矢量场图(Global wind visualization)
效果图源代码$.getJSON('data-gl/asset/data/winds.json', function (windData) { var data = []; var p = 0; var maxMag = 0; var minMag = Infinity; for (var j = 0; j < windData.ny; j++)...原创 2019-05-06 11:16:24 · 2331 阅读 · 1 评论 -
265Echarts - GL 矢量场图(Flow on the cartesian)
效果图源代码$.getScript('vendors/simplex.js').done(function () {var noise = new SimplexNoise(Math.random);var noise2 = new SimplexNoise(Math.random);function generateData() { var data = []; f...原创 2019-05-06 11:15:25 · 1579 阅读 · 0 评论 -
264Echarts - GL 路径图(Use linesGL to draw 1 million ny streets.)
效果图源代码var CHUNK_COUNT = 32;var dataCount = 0;function fetchData(idx) { if (idx >= CHUNK_COUNT) { return; } var dataURL = `data/asset/data/links-ny/links_ny_${idx}.bin`;...原创 2019-05-06 11:14:23 · 936 阅读 · 0 评论 -
264Echarts - GL 散点图(10 million Bulk GPS points)
效果图源代码var dataCount = 0;var CHUNK_COUNT = 230;// https://blog.openstreetmap.org/2012/04/01/bulk-gps-point-data/function fetchData(idx) { if (idx >= CHUNK_COUNT) { return; } ...原创 2019-05-06 11:13:23 · 1589 阅读 · 0 评论 -
263Echarts - 3D 折线图(三维折线图正交投影)
效果图源代码var data = [];// Parametric curvefor (var t = 0; t < 25; t += 0.001) { var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t); var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t); ...原创 2019-05-06 11:12:28 · 7756 阅读 · 1 评论 -
262Echarts - 3D 路径图(Flights on Geo3D)
效果图源代码$.getJSON('data-gl/asset/data/flights.json', function(data) { function getAirportCoord(idx) { return [data.airports[idx][3], data.airports[idx][4]]; } var routes = data.ro...原创 2019-05-06 11:11:15 · 1474 阅读 · 0 评论 -
261Echarts - 3D 路径图(Flights GL)
效果图源代码var uploadedDataURL = "data-gl/asset/data/flights.json";app.title = '65k+ 飞机航线';myChart.showLoading();$.getJSON(uploadedDataURL, function(data) { myChart.hideLoading(); functi...原创 2019-05-06 11:10:09 · 1544 阅读 · 3 评论 -
260Echarts - 3D 路径图(Flights)
效果图源代码$.getJSON('./data-gl/asset/data/flights.json', function (data) { var airports = data.airports.map(function (item) { return { coord: [item[3], item[4]] } }...原创 2019-05-06 11:09:17 · 981 阅读 · 0 评论 -
259Echarts - 3D 路径图(Airline on Globe)
效果图源代码$.getJSON('data-gl/asset/data/flights.json', function(data) { function getAirportCoord(idx) { return [data.airports[idx][3], data.airports[idx][4]]; } var routes = data.r...原创 2019-05-06 11:07:51 · 1644 阅读 · 0 评论 -
258Echarts - 3D 地图(Wood City)
效果图源代码$.getJSON('data-gl/asset/data/buildings.json', function (buildingsGeoJSON) { echarts.registerMap('buildings', buildingsGeoJSON); var regions = buildingsGeoJSON.features.map(functio...原创 2019-05-06 11:06:47 · 956 阅读 · 0 评论 -
257Echarts - 3D 地图(Buildings)
效果图源代码$.getJSON('data-gl/asset/data/buildings.json', function (buildingsGeoJSON) { echarts.registerMap('buildings', buildingsGeoJSON); var regions = buildingsGeoJSON.features.map(function...原创 2019-05-06 11:05:40 · 1715 阅读 · 1 评论 -
256Echarts - 3D 曲面(Surface Wave)
效果图源代码option = { tooltip: {}, backgroundColor: '#fff', visualMap: { show: false, dimension: 2, min: -1, max: 1, inRange: { color: ['#...原创 2019-05-06 11:04:20 · 3579 阅读 · 0 评论 -
255Echarts - 3D 曲面(Theme Roses)
效果图源代码var sin = Math.sin;var cos = Math.cos;var pow = Math.pow;var sqrt = Math.sqrt;var cosh = Math.cosh;var sinh = Math.sinh;var exp = Math.exp;var PI = Math.PI;var square = function (x) ...原创 2019-05-06 11:02:58 · 656 阅读 · 0 评论 -
254Echarts - 3D 曲面(Mollusc Shell)
效果图源代码option = { tooltip: {}, visualMap: { show: false, dimension: 2, min: -5, max: 0, inRange: { color: ['#313695', '#4575b4', '#74add1'...原创 2019-05-06 11:01:39 · 652 阅读 · 0 评论 -
253Echarts - 3D 曲面(皮革材质)
效果图源代码var TILING = [4, 2];var heightImg = new Image();heightImg.onload = update;heightImg.src = './data-gl/asset/leather/leather_height.jpg';function update() { var canvas = document.crea...原创 2019-05-06 11:00:48 · 1021 阅读 · 0 评论 -
252Echarts - 3D 曲面(Golden Rose)
效果图源代码var sin = Math.sin;var cos = Math.cos;var pow = Math.pow;var sqrt = Math.sqrt;var cosh = Math.cosh;var sinh = Math.sinh;var exp = Math.exp;var PI = Math.PI;var square = function (x) ...原创 2019-05-06 10:59:45 · 799 阅读 · 0 评论 -
251Echarts - 3D 曲面(Breather)
效果图源代码var sin = Math.sin;var cos = Math.cos;var pow = Math.pow;var sqrt = Math.sqrt;var cosh = Math.cosh;var sinh = Math.sinh;var PI = Math.PI;var aa = 0.4;var r = 1 - aa * aa;var w = sq...原创 2019-05-06 10:58:26 · 1355 阅读 · 0 评论 -
250Echarts - 3D 曲面(Sphere Parametric Surface)
效果图源代码option = { tooltip: {}, visualMap: { show: false, dimension: 2, min: -1, max: 1, inRange: { color: ['#313695', '#4575b4', '#74add1'...原创 2019-05-06 10:57:34 · 1261 阅读 · 0 评论 -
249Echarts - 3D 曲面(Simple Surface)
效果图源代码option = { tooltip: {}, backgroundColor: '#fff', visualMap: { show: false, dimension: 2, min: -1, max: 1, inRange: { color: ['#...原创 2019-05-06 10:56:35 · 3306 阅读 · 0 评论 -
248Echarts - 3D 曲面(Parametric Surface Rose)
效果图源代码var sin = Math.sin;var cos = Math.cos;var pow = Math.pow;var sqrt = Math.sqrt;var cosh = Math.cosh;var sinh = Math.sinh;var exp = Math.exp;var PI = Math.PI;var square = function (x) ...原创 2019-05-06 10:55:37 · 926 阅读 · 1 评论 -
247Echarts - 3D 曲面(Metal Surface)
效果图源代码var sin = Math.sin;var cos = Math.cos;var pow = Math.pow;var sqrt = Math.sqrt;var cosh = Math.cosh;var sinh = Math.sinh;var PI = Math.PI;var aa = 0.4;var r = 1 - aa * aa;var w = sq...原创 2019-05-06 10:52:53 · 570 阅读 · 0 评论 -
246Echarts - 3D 曲面(Image Surface Sushuang)
效果图源代码var img = new Image();var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');img.onload = function () { var width = canvas.width = img.width; var height =...原创 2019-05-06 10:51:51 · 131455 阅读 · 2 评论 -
245Echarts - 3D 散点图(Scatter3D - Simplex Noise)
效果图源代码$.getScript('vendors/simplex.js').done(function () {var noise = new SimplexNoise(Math.random);function generateData(theta, min, max) { var data = []; for (var i = 0; i <= 20; i...原创 2019-05-06 10:50:23 · 1325 阅读 · 0 评论 -
244Echarts - 3D 散点图(3D Scatter with Scatter Matrix)
效果图源代码$.get('data/asset/data/life-expectancy-table.json', function (data) { var sizeValue = '57%'; var symbolSize = 2.5; option = { tooltip: {}, grid3D: { ...原创 2019-05-06 10:49:06 · 771 阅读 · 0 评论 -
243Echarts - 3D 散点图(三维散点图正交投影)
效果图源代码$.getScript('vendors/simplex.js').done(function () {var noise = new SimplexNoise(Math.random);function generateData(theta, min, max) { var data = []; for (var i = 0; i <= 40; i...原创 2019-05-06 10:46:23 · 1425 阅读 · 0 评论 -
242Echarts - 3D 散点图(Scatter3D - Globe Population)
效果图源代码$.getJSON('data-gl/asset/data/population.json', function (data) { data = data.filter(function (dataItem) { return dataItem[2] > 0; }).map(function (dataItem) { re...原创 2019-05-06 10:45:05 · 1500 阅读 · 0 评论 -
242Echarts - 3D 散点图(3D Scatter with Dataset)
效果图源代码$.get('data/asset/data/life-expectancy-table.json', function (data) { var symbolSize = 2.5; option = { grid3D: {}, xAxis3D: { type: 'category' }, ...原创 2019-05-06 10:44:08 · 1060 阅读 · 1 评论 -
241Echarts - 3D 散点图(Scatter3D)
效果图源代码var indices = { name: 0, group: 1, id: 16};var schema = [ {name: 'name', index: 0}, {name: 'group', index: 1}, {name: 'protein', index: 2}, {name: 'calcium', in...原创 2019-05-06 10:43:06 · 8383 阅读 · 0 评论 -
240Echarts - 3D 柱状图(Transparent Bar3D)
效果图源代码var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];var ...原创 2019-05-06 10:41:34 · 1051 阅读 · 0 评论 -
239Echarts - 3D 柱状图(Stacked Bar3D)
效果图源代码$.getScript('vendors/simplex.js').done(function () {function generateData() { var data = []; var noise = new SimplexNoise(Math.random); for (var i = 0; i <= 10; i++) { ...原创 2019-05-06 10:40:36 · 2188 阅读 · 0 评论 -
238Echarts - 3D 柱状图(Metal Bar3D)
效果图源代码 $.getScript('vendors/simplex.js').done(function () {var noise = new SimplexNoise(Math.random);function generateData(theta, min, max) { var data = []; for (var i = 0; i <= 20; ...原创 2019-05-06 10:39:48 · 1072 阅读 · 0 评论 -
237Echarts - 3D 柱状图(Image to Bar3D)
效果图源代码var img = new Image();var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');img.onload = function () { var width = canvas.width = img.width / 2; var heig...原创 2019-05-06 10:38:26 · 61320 阅读 · 0 评论 -
236Echarts - 3D 柱状图(Global Population - Bar3D on Globe)
效果图源代码$.getJSON("data-gl/asset/data/population.json", function (data) { data = data.filter(function (dataItem) { return dataItem[2] > 0; }).map(function (dataItem) { ret...原创 2019-05-06 10:36:27 · 672 阅读 · 1 评论 -
235Echarts - 3D 柱状图(Voxelize image)
效果图源代码var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");var imgData;var currentImg;// Configurationsvar config = { scale: 0.3, roughness: 0, metalne...原创 2019-05-06 10:35:35 · 1751 阅读 · 0 评论 -
234Echarts - 3D 柱状图(Bar3D - Simplex Noise)
效果图源代码$.getScript('vendors/simplex.js').done(function () {var noise = new SimplexNoise(Math.random);function generateData(theta, min, max) { var data = []; for (var i = 0; i <= 50; i...原创 2019-05-06 10:34:46 · 1528 阅读 · 0 评论 -
233Echarts - 3D 柱状图(Bar3D - Punch Card)
效果图源代码var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];var ...原创 2019-05-06 10:33:51 · 4321 阅读 · 0 评论