option = {
series: [
{
type: 'funnel',
left: '10%', // 漏斗图左边距
top: 60, // 漏斗图上边距
width: '80%', // 漏斗图宽度
height: '70%', // 漏斗图高度
min: 0, // 数据最小值
max: 100, // 数据最大值
minSize: '0%', // 最小尺寸
maxSize: '100%', // 最大尺寸
sort: 'descending', // 排序方式,'descending' 表示降序
gap: 2, // 漏斗图项之间的间隔
label: { // 数据标签
show: true,
position: 'inside' // 标签位置,'inside' 表示标签在漏斗内部
},
labelLine: { // 标签的连接线
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: { // 漏斗图项的样式
borderColor: '#fff',
borderWidth: 1
},
emphasis: { // 高亮样式
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
data: [
{ value: 100, name: 'Step1' },
{ value: 80, name: 'Step2' },
{ value: 60, name: 'Step3' },
{ value: 40, name: 'Step4' },
{ value: 20, name: 'Step5' }
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
这里是一些漏斗图的常用属性和说明:
- left、top、width、height:漏斗图的位置和尺寸。
- min、max:数据的最小值和最大值,用于设置漏斗图的数据范围。
- minSize、maxSize:漏斗图项的最小和最大尺寸,可以用百分比或具体数值表示。
- sort:排序方式,可以是 'ascending'(升序)、'descending'(降序)或 null。
- gap:漏斗图项之间的间隔。
- label:数据标签的配置,包括是否显示、位置等。
- labelLine:标签的连接线配置。
- itemStyle:漏斗图项的样式配置。
- emphasis:高亮样式配置,当鼠标悬停在漏斗图项上时生效。
上述示例中的 data 数组包含了漏斗图的数据项,每个数据项是一个对象,包含 value 表示值和 name 表示名称。
你可以根据实际需求调整这些属性以满足你的图表要求。
转载请注明出处:http://www.zyzy.cn/article/detail/5443/ECharts