[]
漏斗图主要分析有逻辑顺序关系的数据,表现随着业务流程的推进业务目标完成的情况。
ECharts 漏斗图插件与内置的漏斗图组件不同,它可以通过开放的自定义属性定制出更丰富的视觉效果,下图是部分示例:
示例文件包:可下载后直接导入系统参考查看。
单击可视化插件按钮展开插件列表,然后在 ECharts 插件中将漏斗图插件拖拽至编辑区,即可添加一个 ECharts 漏斗图插件。
添加图表后,数据绑定面板会自动打开,在数据绑定面板中选择数据集或数据模型。
示例中我们使用的是一个数据集。
将数据集或模型中的字段拖拽到组件的各个绑定区域完成数据绑定,在左侧编辑区可见组件已经按照绑定的字段进行了绘制。
数据绑定区域 | 说明 |
---|---|
数值 | 绑定数值类字段,可绑定一个字段。 |
系列 | 绑定组件分析的系列,可绑定一个字段。 |
提示标签 | 提示标签是指当鼠标移至图形时,会出现相应的提示信息。使用方法详见鼠标提示标签。 |
钻取 | 设置组件数据钻取路径,详见数据钻取。 |
ECharts 插件与内置图表类似都可一进行数据处理,如对数据进行聚合运算,修改数据的显示格式和单位等等,使其更符合使用场景的需要。
数据处理详细操作介绍请参考数据处理。
ECharts 插件同样支持丰富的数据探索分析能力,可为您的数据可视化分析过程提供强有力的支撑。
比如为组件添加过滤器、排名筛选、切换类型等。
有关具体操作的介绍,请参考数据探索与分析中对应的介绍。
在编辑区右侧选择属性设置或者双击该图表,打开属性设置面板可进行图表外观属性的设置。
绝大部分的属性设置项目与内置图表一致,请参考单个组件外观与属性设置。本文中主要举例介绍不同的属性设置项。
宽度范围: 调整漏斗图最宽和最窄位置的宽度。
图形排序: 将漏斗图的图形进行排序。
图形间距: 组成漏斗图的图形块之间的距离。
图形对齐: 图形块的对齐方式。
ECharts 插件与普通内置图表最大的不同点是可以自定义属性,使用 JS 代码进行深度定制。
自定义属性窗口编写区可直接编写JS代码,具体配置项与 ECharts 一致,请您参考 ECharts 官网 https://echarts.apache.org/zh/option.html#title。
窗口右上角的查看配置项按钮可查看产品图表中默认的配置项,当与定制内容重复时,以定制内容优先。
例如使用JS 代码自定义属性修改了漏斗图的显示样式,并添加了外围的预估值。预览效果如下:
具体代码如下,供您参考。
let ldata = []
let sdata = option.series[0].data
console.log(sdata)
const handle = (property) => {
return function(a,b){
const val1 = a[property];
const val2 = b[property];
return val1 - val2;
}
}
sdata.sort(handle('value'))
console.log(sdata)
let expectData = []
sdata.forEach((item,index) => {
ldata.push(item.name)
let tmp = {
name:item.name,
value:item.value*(1*(10-index-1))
}
expectData.push(tmp)
})
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
toolbox: {
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
legend: {
data:ldata
},
series: [
{
name: '预估',
type: 'funnel',
left: '10%',
width: '80%',
label: {
formatter: '{b}预估'
},
labelLine: {
show: false
},
itemStyle: {
opacity: 0.7
},
emphasis: {
label: {
position: 'inside',
formatter: '{b}预估: {c}'
}
},
data: expectData
},
{
name: 'Actual',
type: 'funnel',
left: '10%',
width: '80%',
maxSize: '80%',
label: {
position: 'inside',
formatter: '{c}',
color: '#fff'
},
itemStyle: {
opacity: 0.5,
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
label: {
position: 'inside',
formatter: '{b}Actual: {c}'
}
},
data: sdata,
// Ensure outer shape will not be over inner shape when hover.
z: 100
}
]
};
return option