ECharts 中的漏斗图(Funnel Chart)用于表示数据在不同阶段的递减关系,常用于展示销售渠道、转化率等信息。以下是漏斗图的一些常用属性和一个简单的实例:
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