echarts 3d 饼图
时间: 2023-07-08 16:21:00 浏览: 137
Echarts 支持 3D 饼图,可以通过设置 series 中的 type 属性为 'pie3D' 来实现。同时,还需要设置 visualMap-orient 属性为 'horizontal',使得可视化组件在水平方向上布局,否则 3D 饼图可能无法正常显示。
例如,以下代码展示了一个简单的 3D 饼图:
```javascript
option = {
visualMap: {
show: false,
orient: 'horizontal',
left: 'center',
min: 0,
max: 100,
inRange: {
colorLightness: [0.2, 0.8]
}
},
series: [
{
name: '访问来源',
type: 'pie3D',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
].sort(function (a, b) { return a.value - b.value; }),
label: {
formatter: '{b}:{c}({d}%)',
textStyle: {
fontWeight: 'normal',
fontSize: 12
}
},
itemStyle: {
opacity: 0.7
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
}
}
]
};
```
以上代码中,type 属性设置为 'pie3D',表示使用 3D 饼图。其他属性和普通饼图相同,只需要将饼图类型改为 'pie3D' 即可。
阅读全文
相关推荐
















