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
This is experimental right now, should not be used in production.
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!