随着数据可视化的需求越来越高,echarts漏斗图作为数据可视化中的一种重要方式,被广泛应用于各种场景。本文将从多个方面对echarts漏斗图进行详细的阐述。
一、echarts漏斗图不变形
在实际应用中,我们经常会遇到展示数据的值不相等的情况。这就需要使用到echarts漏斗图的缩放功能来使漏斗图比例不变形。实现这个功能需要使用echarts中的dataZoom组件,即对漏斗图组件进行联动可视化。
option = {
//设置dataZoom组件
dataZoom: {
//水平滚动条显示位置
orient: 'horizontal',
//滚动条宽度
width: 200,
//缩放范围的起始百分比
start: 0,
//缩放范围的结束百分比
end: 100
},
series: {
//漏斗图组件
type: 'funnel',
...
}
};
二、echarts漏斗图改为金字塔
有时候漏斗图无法满足我们的展示需求,需要将漏斗图改为金字塔形式进行展示,即从下往上进行展示。
option = {
series: {
//金字塔组件
type: 'funnel',
//数据排序方式
sort: 'ascending',
...
}
};
三、echarts漏斗图知识点
使用echarts漏斗图需要掌握一些基础的知识点,如:
1、数据格式:漏斗图的数据格式通常为数组类型,格式为[{value:10, name:'展示值1'},{value:8, name:'展示值2'},{value:6, name:'展示值3'},...]。
2、数据单位:会根据数据也量调整漏斗图组件的显示单位,单位为%、$、K、M、B等。可以通过设置formatter属性进行模板化显示。
option = {
series: {
type: 'funnel',
data:[
{value:100, name:'展示值1'},
{value:80, name:'展示值2'},
{value:60, name:'展示值3'},
],
//通过设置label的formatter函数设置模板化显示
label: {
formatter: '{a}{b}: {c}M'
}
}
};
3、数据样式:可以通过设置itemStyle属性设置漏斗图的样式、颜色、边框等。同时,可以设置emphasis属性对鼠标悬停的状态进行设置,如鼠标悬停时的高亮样式。
option = {
series: {
type: 'funnel',
data:[
{value:100, name:'展示值1'},
{value:80, name:'展示值2'},
{value:60, name:'展示值3'}
],
//通过设置itemStyle属性进行样式设置
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
...
},
//通过设置emphasis属性进行高亮显示
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
};
四、echarts漏斗图怎么做
做一个简单的echarts漏斗图可以参考以下步骤:
1、引入echarts插件库
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
2、创建容器,设置div标签的id和样式。
<div id="chart" style="width: 600px;height:400px"></div>
3、创建echarts实例并进行数据配置。
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;
option = {
series: {
type: 'funnel',
data:[
{value:100, name:'展示值1'},
{value:80, name:'展示值2'},
{value:60, name:'展示值3'}
],
...
}
};
myChart.setOption(option);
五、echarts漏斗图圆角
可以使用echarts中的itemStyle属性的borderRadius属性来设置漏斗图的圆角,使漏斗图更美观可爱。
option = {
series: {
type: 'funnel',
data:[
{value:100, name:'展示值1'},
{value:80, name:'展示值2'},
{value:60, name:'展示值3'}
],
//通过设置itemStyle属性中borderRadius属性设置圆角
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
borderRadius: 10,
...
},
}
};
六、echarts图表创建
在使用echarts创建漏斗图之前需要创建相应的echarts图表。
//创建echarts图表
var myChart = echarts.init(document.getElementById('chart'), 'light');
七、echarts漏斗图圆脸
可以使用echarts中的funnelAlign属性来设置漏斗图为圆脸形式。
var option = {
series: {
//设置圆脸形式的漏斗图
funnelAlign: 'center',
...
}
};
八、echarts漏斗图设置高度
可以使用echarts中的grid属性来设置echarts容器的高度,从而使漏斗图高度得以控制。
option = {
grid: {
//设置echarts容器高度
height: 400
},
...
};
九、echarts漏斗图怎么设置三角形
可以使用echarts中的sort和labeLine属性实现三角形形式的漏斗图。
option = {
series: {
type: 'funnel',
//排序方式
sort: 'ascending',
labelLine: {
show: false
},
...
}
};
十、echarts漏斗图表不改变形状
可以使用dataZoom组件解决echarts漏斗图展示不变形的问题。
option = {
dataZoom: {
//设置dataZoom组件
orient: 'horizontal',
width: 200,
start: 0,
end: 100
},
series: {
type: 'funnel',
...
}
};