let's have a mountain (as defined by the surface 3d function below in the html). I want to plot over this region, the temperature anomalies. Now, the colors are from the z values. But, would like the colors represent the temperature anomalies, not the z values. In other words, how to set surface color ? Thanks in advance !!
<!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/[email protected]/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>
I try set surface color, but i get only the z values colors. When i try dimension:3, i get just black colors.