Experiments with echarts library

This is experimental right now, should not be used in production.


This is a companion discussion topic for the original entry at https://kni.me/w/_HO1gG7ao3N5_Kbj

Cool! I tried similar things but I am specifically interested in the OpenGL extension of echarts. However, I could not get the requireJS to work with both the standard echarts and echarts-gl.
Do you have any hints on that? Here is what I tried so far (+ different combinations thereof).



require.config({
	paths: {
		"echarts.common.min": "https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.2/echarts.common.min",
		"echarts": "https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.2/echarts.min",
		"echarts-gl": "https://cdnjs.cloudflare.com/ajax/libs/echarts-gl/2.0.2/echarts-gl.min"
	}/*,
	shim: {
    		"echarts-gl": {
	        deps: ["echarts.common.min", "echarts"]
    		}
	}*/
});

require(["echarts.common.min","echarts-gl"], function(echarts) {
	var chartDom = $(`<div id="main"></div>`).appendTo("body").get(0);
	var myChart = echarts.init(chartDom);
	var option;
	
	var data = [];
	// Parametric curve
	for (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);
	    var z = t + 2.0 * Math.sin(75 * t);
	    data.push([x, y, z]);
	}
	alert(data.length);
	
	option = {
	    tooltip: {},
	    backgroundColor: '#fff',
	    visualMap: {
	        show: false,
	        dimension: 2,
	        min: 0,
	        max: 30,
	        inRange: {
	            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
	        }
	    },
	    xAxis3D: {
	        type: 'value'
	    },
	    yAxis3D: {
	        type: 'value'
	    },
	    zAxis3D: {
	        type: 'value'
	    },
	    grid3D: {
	        viewControl: {
	            projection: 'orthographic'
	        }
	    },
	    series: [{
	        type: 'line3D',
	        data: data,
	        lineStyle: {
	            width: 4
	        }
	    }]
	};
	
	option && myChart.setOption(option);
});

Thanks!