echarts实现3D饼图,制作一个html导入echarts
时间: 2023-06-28 10:15:06 浏览: 108
微信小程序遍历Echarts图表实现多个饼图
好的,下面是一个简单的 HTML 文件,它利用 ECharts 绘制了一个 3D 饼图:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D 饼图示例</title>
<!-- 引入 ECharts 的主文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入 ECharts 的 3D 组件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>
<body>
<!-- 用一个 div 作为图表容器 -->
<div id="chart" style="width:600px;height:400px;"></div>
<script type="text/javascript">
// 初始化图表对象
var chart = echarts.init(document.getElementById('chart'));
// 设置图表配置项和数据
var option = {
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>
```
在这个示例中,我们引入了 ECharts 的主文件和 3D 组件文件,并在页面中创建了一个 `div` 作为图表容器。在 JavaScript 部分,我们初始化了一个图表对象,设置了图表的配置项和数据,最后使用 `setOption` 方法将配置项应用到图表中。
你可以将这个 HTML 文件保存到本地,然后在浏览器中打开它,即可看到绘制出的 3D 饼图。
阅读全文