| /* |
| title: Flow on the cartesian |
| category: flowGL |
| titleCN: 直角坐标系上的向量场 |
| theme: dark |
| videoStart: 2000 |
| videoEnd: 10000 |
| */ |
| |
| $.getScript('https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js').done(function () { |
| |
| var noise = new SimplexNoise(Math.random); |
| var noise2 = new SimplexNoise(Math.random); |
| function generateData() { |
| var data = []; |
| for (var i = 0; i <= 50; i++) { |
| for (var j = 0; j <= 50; j++) { |
| var dx = noise.noise2D(i / 30, j / 30); |
| var dy = noise2.noise2D(i / 30, j / 30); |
| var mag = Math.sqrt(dx * dx + dy * dy); |
| valMax = Math.max(valMax, mag); |
| valMin = Math.min(valMin, mag); |
| data.push([i, j, dx, dy, mag]); |
| } |
| } |
| return data; |
| } |
| var valMin = Infinity; |
| var valMax = -Infinity; |
| var data = generateData(); |
| |
| |
| myChart.setOption({ |
| visualMap: { |
| show: false, |
| min: valMin, |
| max: valMax, |
| dimension: 4, |
| inRange: { |
| color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] |
| } |
| }, |
| xAxis: { |
| type: 'value', |
| axisLine: { |
| lineStyle: { |
| color: '#fff' |
| } |
| }, |
| splitLine: { |
| show: false, |
| lineStyle: { |
| color: 'rgba(255,255,255,0.2)' |
| } |
| } |
| }, |
| yAxis: { |
| type: 'value', |
| axisLine: { |
| lineStyle: { |
| color: '#fff' |
| } |
| }, |
| splitLine: { |
| show: false, |
| lineStyle: { |
| color: 'rgba(255,255,255,0.2)' |
| } |
| } |
| }, |
| series: [{ |
| type: 'flowGL', |
| data: data, |
| particleDensity: 64, |
| particleSize: 5, |
| itemStyle: { |
| opacity: 0.5 |
| } |
| }, { |
| type: 'custom', |
| data: data, |
| encode: { |
| x: 0, |
| y: 0 |
| }, |
| renderItem: function (params, api) { |
| var x = api.value(0), y = api.value(1), dx = api.value(2), dy = api.value(3); |
| var start = api.coord([x - dx / 2, y - dy / 2]); |
| var end = api.coord([x + dx / 2, y + dy / 2]); |
| return { |
| type: 'line', |
| shape: { |
| x1: start[0], y1: start[1], |
| x2: end[0], y2: end[1] |
| }, |
| style: { |
| lineWidth: 2, |
| stroke:'#fff', |
| opacity: 0.2 |
| } |
| } |
| } |
| }] |
| }); |
| |
| }); |