首页echarts平面3d柱状图完整代码

echarts平面3d柱状图完整代码

时间: 2023-07-30 22:05:34 浏览: 93

下面是一个使用 ECharts 绘制平面 3D 柱状图的完整代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 3D 柱状图示例</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> </head> <body>  <div id="chart" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { tooltip: {}, xAxis3D: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] // x 轴的数据 }, yAxis3D: { type: 'value' // y 轴的数据 }, zAxis3D: { type: 'value' // z 轴的数据 }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { // 设置鼠标旋转视角 autoRotate: true }, light: { main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } } }, series: [{ type: 'bar3D', data: [ ['A', 1, 10], ['B', 2, 20], ['C', 3, 30], ['D', 4, 40], ['E', 5, 50] ] // 柱状图的数据，每个数据项包括 x、y、z 坐标 }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 你可以将以上代码保存为一个 HTML 文件，然后在浏览器中打开该文件，就能看到绘制的平面 3D 柱状图效果。请注意，为了能够正常显示图表，你需要在头部引入 ECharts 的 JavaScript 文件。

阅读全文