写一个echarts 3D立体饼状图
时间: 2023-06-13 19:05:30 浏览: 155
3D 饼状图
好的,以下是一个简单的 echarts 3D立体饼状图的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts 3D立体饼状图</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入 echarts-gl.js -->
<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立体饼状图,你可以根据需要修改数据、样式等选项来自定义图表。
阅读全文