echarts的funnel改为立体的不生效
时间: 2024-03-03 15:53:20 浏览: 121
ECharts漏斗图-Funnel.rar
将 echarts 的漏斗图(funnel)改为立体的,需要设置某些属性。以下是一个简单的例子,展示如何将漏斗图改为立体的:
```javascript
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: '漏斗图',
type: 'funnel',
left: '10%',
width: '80%',
top: 60,
bottom: 60,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
{ value: 80, name: '点击' },
{ value: 100, name: '展现' }
],
// 下面是设置立体属性的代码
// 注意这里需要使用 series.data 的第一个元素的值作为柱子的高度
itemStyle: {
normal: {
opacity: 0.5,
borderColor: '#fff',
borderWidth: 2
}
},
dimensions: ['value', 'height'],
encode: {
x: 'value',
y: 'name',
tooltip: 'value'
},
left: 80,
right: 80,
top: 120,
bottom: 120,
label: {
show: true,
position: 'insideLeft'
},
data: [
{ value: 60, name: '访问', height: 30 },
{ value: 40, name: '咨询', height: 20 },
{ value: 20, name: '订单', height: 10 },
{ value: 80, name: '点击', height: 40 },
{ value: 100, name: '展现', height: 50 }
]
}
]
};
```
其中,需要设置以下属性:
1. `itemStyle.normal.opacity`:柱子的透明度,数值越大越不透明;
2. `itemStyle.normal.borderColor`:柱子的边框颜色;
3. `itemStyle.normal.borderWidth`:柱子的边框宽度;
4. `dimensions`:指定数据的维度;
5. `encode`:指定数据的编码方式。
这些属性的具体用法可以参考上面的代码例子。
阅读全文