echarts3d饼状图代码
时间: 2023-07-22 19:04:48 浏览: 101
HTML中的3D饼状图
下面是一个简单的 ECharts 3D 饼状图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 3D 饼状图示例</title>
<!-- 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个容器用于显示图表 -->
<div id="chart-container" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 初始化图表实例
var chart = echarts.init(document.getElementById('chart-container'));
// 配置图表选项
var options = {
tooltip: {},
series: [{
type: 'pie3D',
data: [
{value: 335, name: '数据1'},
{value: 310, name: '数据2'},
{value: 234, name: '数据3'},
{value: 135, name: '数据4'},
{value: 1548, name: '数据5'}
]
}]
};
// 使用配置项显示图表
chart.setOption(options);
</script>
</body>
</html>
```
将以上代码保存为一个 HTML 文件,然后在浏览器中打开该文件,你就可以看到一个简单的 3D 饼状图示例。
请确保在 `<head>` 标签中引入了 ECharts 的 JavaScript 文件,这里使用了 ECharts 5 版本的 CDN 引入方式。你也可以下载 ECharts 的文件并引入到本地,然后修改相应的文件路径。在 `<body>` 标签中创建一个容器用于显示图表,并在 `<script>` 标签中编写 JavaScript 代码来初始化图表实例、配置图表选项,并使用 `setOption` 方法将配置应用到图表中。
根据你的需求,你可以修改数据和样式等配置项,以创建符合你要求的 3D 饼状图。
阅读全文