html +ECharts 3D饼图
时间: 2024-11-02 15:06:21 浏览: 26
HTML 和 ECharts 结合可以创建出交互式和美观的图表,包括三维效果。ECharts 是一款基于 JavaScript 的开源数据可视化库,它提供了丰富的图表类型,包括3D饼图。3D饼图可以展示各个部分相对于整体的比例关系,并通过立体效果增强视觉冲击力。
要在 HTML 中使用 ECharts 创建3D饼图,首先需要从 ECharts 的官网下载所需的库文件,并引入到 HTML 文件中。然后,你可以使用 JavaScript 或 TypeScript 编写代码,如下所示:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts 3D Pie Chart</title>
<!-- 引入 ECharts 主体文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
<style>
#chart {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<!-- 初始化 ECharts 实例 -->
<script>
var myChart = echarts.init(document.getElementById('chart'));
// 配置3D饼图的数据和选项
var option = {
tooltip: {},
visualMap: {
show: false,
pieces: [{
min: 0,
max: 1,
color: ['#3f9abf']
}]
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
roseType: 'area', // 选择3D玫瑰图样式
data: [
{ value: 335, name: '销售部' },
{ value: 310, name: '市场部' },
{ value: 234, name: '技术部' },
{ value: 135, name: '产品部' },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 渲染图表
myChart.setOption(option);
</script>
</body>
</html>
```
在这个例子中,我们创建了一个 3D 玫瑰图(roseType: 'area'),展示了四个部门的贡献比例。
阅读全文