const myChart = this.$echarts.init(document.getElementById('main'));
let data = [
{name:'冰淇淋1',value:111}, {name:'冰淇淋2',value:133}, {name:'冰淇淋3',value:213}, {name:'冰淇淋4',value:53},
];
let sum = eval(data.map(item => item.value).join('+'))
let addUp = 0
let minHeight = 2 //最小高度
// eslint-disable-next-line no-unused-vars
let top = 5
let finalData = data.map(item => {
let itemValue = 0
if (item.value / sum * 100 < minHeight) itemValue = minHeight
else itemValue = (item.value / sum * 100)
top += itemValue
return {
value: addUp += itemValue,
name: item.name,
realValue: item.value,
itemStyle: {
height: `${itemValue}%`
}
}
})
const option = {
dataset:{
source:[
...finalData
]},
series: [{
name: 'funnelChart',
type: 'funnel',
sort: 'ascending',
calculable: true
}]
};
myChart.setOption(option);
echarts实现漏斗三角形(根据数值显示高度)
最新推荐文章于 2024-05-10 11:47:36 发布