Dear Community of Echarts,
I found interesting this charting library and started learning.
I also post my question on stack overflow [
https://stackoverflow.com/questions/77862146/surface-color-on-apache-echarts-js
].
Actually I want to plot a surface (assume a mountain) and set a variable
surface color (temperature anomalies) (something similar to
https://plotly.com/javascript/reference/surface/#surface-surfacecolor).
Thanks in advance !!
the code:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 3D Surface Plot</title>
<!-- Include ECharts library -->
<script
src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js";></script>
<script
src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js";></script>
</head>
<body style="margin: 0; padding: 0; height: 100vh;">
<div id="chart" style="width: 100%; height: 100%;"></div>
<script>
// Initialize ECharts instance
var myChart = echarts.init(document.getElementById('chart'));
// Set the options for the 3D surface plot
var option = {
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
autoRotate: true,
beta: 10,
alpha: 30
}
},
xAxis3D: {
type: 'value'
},
yAxis3D: {
type: 'value'
},
zAxis3D: {
type: 'value'
},
visualMap: {
dimension:2, // Updated to use the 3rd dimension for
color mapping
max: 2, // Set the range of values for color mapping
min: -2,
calculable: true,
inRange: {
color: ['#0000ff', '#ffffff', '#ff0000'] // Blue to
White to Red gradient
}
},
series: [{
type: 'surface',
data: (function () {
var data = [];
for (var x = -Math.PI * 2; x <= Math.PI * 2; x += 0.1) {
for (var y = -Math.PI * 2; y <= Math.PI * 2; y += 0.1) {
var z = Math.cos(x) + Math.sin(y); // Replace
with your terrain elevation function
var temperatureAnomaly = Math.sin(x) +
Math.cos(y); // Replace with your temperature anomaly function
data.push([x, y, z, temperatureAnomaly]);
}
}
return data;
})(),
shading: 'color'
}]
};
// Set the options to the chart
myChart.setOption(option);
</script>
</body>
</html>
```
Manuel
