echarts 3d饼图两组数据
时间: 2024-12-05 11:13:16 浏览: 20
ECharts 是一个强大的数据可视化库,支持多种类型的图表,包括3D饼图。使用ECharts创建3D饼图并展示两组数据,可以通过以下步骤实现:
- 引入ECharts库:首先,需要在HTML文件中引入ECharts库。
- 创建容器:在HTML中创建一个用于显示图表的容器。
- 初始化图表:使用JavaScript初始化ECharts实例。
- 设置数据:定义两组数据,并将其配置到图表中。
- 配置3D效果:设置3D饼图的相关配置项。
以下是一个简单的示例代码,展示了如何使用ECharts创建3D饼图并展示两组数据:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts 3D 饼图示例</title>
<!-- 引入ECharts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<!-- 引入ECharts GL库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.8/dist/echarts-gl.min.js"></script>
<style>
/* 设置图表容器的大小 */
#main {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<!-- 图表容器 -->
<div id="main"></div>
<script>
// 初始化ECharts实例
var chart = echarts.init(document.getElementById('main'));
// 定义两组数据
var data1 = [
{value: 1048, name: '数据1-类别1'},
{value: 735, name: '数据1-类别2'},
{value: 580, name: '数据1-类别3'},
{value: 484, name: '数据1-类别4'},
{value: 300, name: '数据1-类别5'}
];
var data2 = [
{value: 800, name: '数据2-类别1'},
{value: 600, name: '数据2-类别2'},
{value: 400, name: '数据2-类别3'},
{value: 200, name: '数据2-类别4'},
{value: 100, name: '数据2-类别5'}
];
// 配置项
var option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['数据1', '数据2']
},
series: [
{
name: '数据1',
type: 'pie',
radius: '50%',
data: data1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name: '数据2',
type: 'pie',
radius: '50%',
data: data2,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表
chart.setOption(option);
</script>
</body>
</html>
在这个示例中,我们创建了一个包含两组数据的3D饼图。每一组数据都通过不同的系列(series)来表示,并通过不同的颜色进行区分。