首页写一个echarts 3D立体饼状图

写一个echarts 3D立体饼状图

时间: 2023-06-13 09:05:30 浏览: 165

好的，以下是一个简单的 echarts 3D立体饼状图的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts 3D立体饼状图</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> </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: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '60%'], roseType: 'radius', label: { show: false }, emphasis: { label: { show: true } }, data: [ {value: 235, name: '视频广告'}, {value: 274, name: '联盟广告'}, {value: 310, name: '邮件营销'}, {value: 335, name: '直接访问'}, {value: 400, name: '搜索引擎'} ], itemStyle: { normal: { shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, animationType: 'scale', animationEasing: 'elasticOut', animationDelay: function (idx) { return Math.random() * 200; } } ] }; // 设置图表选项 myChart.setOption(option); </script> </body> </html> ``` 这份代码会绘制一个基本的 3D立体饼状图，你可以根据需要修改数据、样式等选项来自定义图表。

阅读全文