ECharts-漏斗圖

• 前言
• 一、效果
• 二、使用步驟

---

前言

使用三個series實現，第一個是虛化的背景漏斗那一塊，第二個是實心的漏斗那一塊，第三個是為了讓橫線旁的文字對齊所以value都是0。

---

一、效果

二、使用步驟

復制后直接在ECharts實例中粘貼使用
代碼如下：

option = {tooltip: {trigger: 'item'// formatter: '{a} <br/>{b} : {c}%'},toolbox: {feature: {dataView: { readOnly: false },restore: {},saveAsImage: {}}},series: [{type: 'funnel',left: '5%',width: '60%',color: ['#703AC2', '#0D74C1', '#37ABC4', '#6FB788', '#E6E97E'],label: {// position: 'inside',formatter: '',show: false// color: '#fff'},labelLine: {show: false},itemStyle: {opacity: 0.5},gap: 4,maxSize: '60%',// height: '86%',top: 20,bottom: 30,sort: 'descending',data: [{ value: 98, name: '易制毒' },{ value: 78, name: '易制爆' },{ value: 64, name: '劇毒' },{ value: 62, name: '爆炸' },{ value: 42, name: '精麻品' }]},{type: 'funnel',left: '-5%',width: '80%',maxSize: '30%',// height: '86%',gap: 4,top: 20,bottom: 30,sort: 'descending',label: {formatter: ''},itemStyle: {opacity: 1,// borderColor: '#fff',// borderWidth: 2},labelLine: {length: 0},data: [{ value: 44, name: '易制毒', num: 44, l: 16.123, kg: 5.521 },{ value: 39, name: '易制爆', num: 39, l: 12.321, kg: 4.254 },{ value: 33, name: '劇毒', num: 33, l: 10.254, kg: 4.012 },{ value: 27, name: '爆炸', num: 27, l: 9.213, kg: 3.654 },{ value: 14, name: '精麻品', num: 14, l: 8.214, kg: 3.218 }]},{type: 'funnel',left: '-5%',width: '80%',maxSize: '0%',// height: '86%',gap: 4,top: 20,bottom: 30,sort: 'descending',label: {show: true,lineHeight: 18,textBorderColor: 'transparent',formatter: function (params) {return ('{f|' +params.name +'}' +'\n' +params.data.num +'瓶(' +params.data.l +'L、' +params.data.kg +'KG)');},rich: {f: {color: '#999999'//字體顏色}}},itemStyle: {opacity: 1,borderColor: 'transparent'// borderWidth: 2},labelLine: {// show: falselength: 220//線的長度},// labelLine: {// normal: {// show: true,// length: 30// }// },// tooltip: {// show: false// },data: [{ value: 0, name: '易制毒', num: 44, l: 16.123, kg: 5.521 },{ value: 0, name: '易制爆', num: 39, l: 12.321, kg: 4.254 },{ value: 0, name: '劇毒', num: 33, l: 10.254, kg: 4.012 },{ value: 0, name: '爆炸', num: 27, l: 9.213, kg: 3.654 },{ value: 0, name: '精麻品',num: 14, l: 8.214, kg: 3.218 }]}] };

---

總結

以上是生活随笔為你收集整理的ECharts-漏斗图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。