首页echarts立体 3d饼图

echarts立体 3d饼图

时间: 2023-11-11 11:01:22 浏览: 104

您可以使用 echarts-gl 库来实现 3D 饼图。具体实现步骤如下： 1. 引入 echarts 和 echarts-gl 库： ```html <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> ``` 2. 创建一个容器来放置图表： ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` 3. 初始化 echarts 实例： ```javascript var chart = echarts.init(document.getElementById('chart')); ``` 4. 配置图表选项： ```javascript var option = { tooltip: {}, series: [{ type: 'pie3D', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] }] }; ``` 5. 将配置项设置到图表实例中并渲染： ```javascript chart.setOption(option);``` 完整代码如下： ```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> 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> ```

阅读全文