效果：
option设置：
// 漏斗图
option2: {
tooltip: {
trigger: 'item',
formatter: "{b} : {c}%"
},
calculable: false,
series: [
{
name: '漏斗图',
type: 'funnel',
left: '10%',
top: 10,
bottom: 60,
width: '65%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'ascending',//设置漏斗图方向，
//'ascending'，'descending'，'none'（表示按 data 顺序）
gap: 8,
legendHoverLink: false,
labelLine: { //视觉引导线样式
length: 30,
lineStyle: {
width: 2,
type: 'solid'
}
},
label: {
formatter: (data) => {
return data.data.name + ' ' + data.data.num
},
color: ['#CD6235',],
fontSize: '16px',
},
itemStyle: {
borderColor: "#fff",
borderWidth: 1,
normal: {
color: function (params) {
//自定义颜色渐变
var colorList = [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#EE8684' // 0% 处的颜色
}, {
offset: 1, color: '#E83F35' // 100% 处的颜色
}],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#F3BA56' // 0% 处的颜色
}, {
offset: 1, color: '#EC6E34' // 100% 处的颜色
}],
global: false // 缺省为 false
}, {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#6EE7FA' // 0% 处的颜色
}, {
offset: 1, color: '#3B88F5' // 100% 处的颜色
}],
global: false // 缺省为 false
}];
return colorList[params.dataIndex];
}
}
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{ value: 60, name: '使用公里数', num: 1200 },
{ value: 40, name: '使用次数', num: 1100 },
{ value: 20, name: '检修次数', num: 800 },
]
}
]
}
注意：data里面的value值不同，图也会对应变形，如果不想让他变形，一直保持这样的三角形，可以就像我的设置一样，添加一个num，作为真实数据展示。这样value的值不变，自然图形也不会变。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149679.html
