echarts 实现立体的漏斗图
时间: 2023-07-11 16:29:56 浏览: 357
pyechart做漏斗图
Echarts中可以通过设置视角(cameraPosition)属性来实现3D立体的漏斗图。以下是一个简单的示例:
```javascript
option = {
title: {
text: '3D漏斗图',
subtext: '数据纯属虚构'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
legend: {
data: ['展现','点击','访问','咨询','订单']
},
calculable: true,
series: [
{
name:'3D漏斗图',
type:'funnel',
x: '10%',
y: 60,
width: '80%',
height: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
normal: {
show: true,
position: 'inside'
},
emphasis: {
textStyle: {
fontSize: 20
}
}
},
labelLine: {
normal: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
}
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1
}
},
data:[
{value:60, name:'访问'},
{value:40, name:'咨询'},
{value:20, name:'订单'},
{value:80, name:'点击'},
{value:100, name:'展现'}
],
// 设置视角(cameraPosition)
cameraPosition: [45, -30, 200]
}
]
};
```
这段代码中,我们设置了视角的位置为[45, -30, 200],其中45表示水平方向旋转的角度,-30表示垂直方向旋转的角度,200表示视角距离漏斗图的远近程度。通过调整视角的位置,可以实现不同的3D立体效果。
阅读全文