首页echarts立体 3d饼图

echarts立体 3d饼图

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

echarts 3D饼图组件

直接引入传入数据即可使用。 import PieChart3D from "@/components/PieChart3D" <PieChart3D values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ]} />

您可以使用 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> ```

阅读全文