首页echarts实现3d饼图

echarts实现3d饼图

时间: 2023-08-10 22:08:50 浏览: 220

要使用Echarts实现3D饼图，你需要使用Echarts的GL插件。下面是一个简单的示例代码，演示如何创建一个3D饼图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D饼图示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.4/dist/echarts-gl.min.js"></script> <style> #chart { width: 600px; height: 400px; } </style> </head> <body> <div id="chart"></div> <script> var chart = echarts.init(document.getElementById('chart')); var option = { tooltip: {}, series: [{ type: 'pie3D', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] }] }; chart.setOption(option); </script> </body> </html> ``` 你可以将上述代码保存为一个HTML文件，然后在浏览器中打开该文件，就能看到一个简单的3D饼图。你可以根据自己的需求修改 `data` 数组中的数据，来展示不同的饼图。

阅读全文