首页echarts 堆叠3d柱状图

echarts 堆叠3d柱状图

时间: 2023-10-31 11:59:51 浏览: 123

您好！对于堆叠的3D柱状图，您可以使用ECharts来实现。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 堆叠3D柱状图示例</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body>  <div id="chart" style="width: 600px;height: 400px;"></div> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['系列1', '系列2', '系列3'] }, grid3D: {}, xAxis3D: { type: 'category', data: ['柱1', '柱2', '柱3', '柱4', '柱5'] }, yAxis3D: {}, zAxis3D: {}, dataset: { dimensions: ['x', 'y', 'z'], source: [ [0, 0, 0, 2], [0, 1, 0, 4], [0, 2, 0, 6], [0, 3, 0, 8], [0, 4, 0, 10], [1, 0, 0, 3], [1, 1, 0, 6], [1, 2, 0, 9], [1, 3, 0, 12], [1, 4, 0, 15], [2, 0, 0, 4], [2, 1, 0, 8], [2, 2, 0, 12], [2, 3, 0, 16], [2, 4, 0, 20] ] }, series: [ { type: 'bar3D', stack: 'stack', encode: { x: 'x', y: 'y', z: 'z' } } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 在上面的代码中，我们使用了ECharts提供的`bar3D`系列来绘制3D堆叠柱状图。您可以根据自己的需求修改数据源和配置项来适应您的实际情况。希望对您有所帮助！如果您有任何其他问题，请随时提问。

阅读全文