效果圖
源代碼
值得一提，不僅需要echarts.min.js還需要echarts-gl.min.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <style> #main { /*對子元素開啓彈性佈局*/ display: flex; /*彈性元素在必要的時候換行*/ flex-wrap: wrap; /*將彈性元素居中*/ justify-content: center; width: 600px; height: 700px; } </style> </head> <body> <div id="main"> </div> <script type="text/javascript"> var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; function makeDate() { let result = []; let total = 19; // 每層的數據密集程度 for (let layer = 1; layer <= 28; ++layer) { for (let bs = 0; bs != total; ++bs) { result.push([17.5 / total * bs, layer, 0.2 + Math.random() * 1.3]) } } return result } let data = makeDate() console.log(data) option = { tooltip: {}, xAxis3D: { name: 'X', type: 'value' }, yAxis3D: { name: 'Y', type: 'value' }, zAxis3D: { name: 'Z', type: 'value', min: 0, max: 1.8, }, visualMap: { type: 'continuous', calculable: true, itemHeight: 350, left: 'right', top: 'center', show: true, dimension: 2, min: 0, max: 1.8, inRange: { color: [ '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026' ], } }, grid3D: { viewControl: { distance: 300 }, }, series: [ { type: 'surface', wireframe: { show: true, }, data: data } ] }; option && myChart.setOption(option); </script> </body> </html>