If you want to use visualMap, please follow the demo of https://echarts.apache.org/examples/en/editor.html?c=simple-surface&gl=1 If you want to set a solid color, the doc is at https://echarts.apache.org/en/option-gl.html#series-surface.itemStyle.color
Thanks *Ovilia* On Wed, Jan 24, 2024 at 4:35 AM Μιχαήλ Σταμάτης <mixstam1...@gmail.com> wrote: > 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 >
