首页给我提供一个echarts的三维散点图代码

给我提供一个echarts的三维散点图代码

时间: 2024-03-10 20:44:31 浏览: 145

好的，以下是一个使用 echarts 的三维散点图的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 3D Scatter Chart Example</title>  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body>  <div id="scatter" style="width: 600px;height:400px;"></div>  <script> var data = [ [10.0, 8.04, 10.0], [8.0, 6.95, 8.0], [13.0, 7.58, 13.0], [9.0, 8.81, 9.0], [11.0, 8.33, 11.0], [14.0, 9.96, 14.0], [6.0, 7.24, 6.0], [4.0, 4.26, 4.0], [12.0, 10.84, 12.0], [7.0, 4.82, 7.0], [5.0, 5.68, 5.0] ]; // 初始化 echarts var myChart = echarts.init(document.getElementById('scatter')); // 定义三维散点图的配置项 var option = { title: { text: 'ECharts 3D Scatter Chart' }, tooltip: {}, legend: { data:['3D Scatter'] }, xAxis3D: { name: 'X Axis', type: 'value' }, yAxis3D: { name: 'Y Axis', type: 'value' }, zAxis3D: { name: 'Z Axis', type: 'value' }, grid3D: { viewControl: { autoRotate: true } }, series: [{ name: '3D Scatter', type: 'scatter3D', data: data.map(function (item) { return [item[0], item[1], item[2]]; }), symbolSize: 10, itemStyle: { opacity: 0.8 } }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 该示例代码中使用 echarts 提供的 `scatter3D` 图表类型来绘制三维散点图，并通过定义 `xAxis3D`、`yAxis3D` 和 `zAxis3D` 来设置三个坐标轴，同时通过 `data` 属性来设置数据。你可以根据自己的需求修改数据和配置项来实现自定义的三维散点图。

阅读全文