項(xiàng)目中有餅狀圖切換漏斗圖的需求，個(gè)人實(shí)現(xiàn)歷程，記錄下。

1. 去官網(wǎng)查詢餅圖如何切換漏斗圖；

https://www.echartsjs.com/examples/zh/editor.html?c=pie-roseType

然并卵，雖然餅圖出來(lái)了，然而并沒(méi)有切換漏斗圖的圖標(biāo)，看來(lái)官網(wǎng)示例也有bug哦；

2. 排查原因；

查看官方文檔，發(fā)現(xiàn)toolbox-feature-magicType-type屬性中只有l(wèi)ine. bar. stack. tiled四個(gè)值，并無(wú)funnel漏斗屬性值；

繼續(xù)排查，發(fā)現(xiàn)echarts版本不一致導(dǎo)致

2.0和3.0 引入的文件不一樣；

2.0版 ： echarts-all.js

3.0版： echarts.min.js

3. 引入echarts2，重新繪制餅圖；

完美解決；

附部分代碼：

html:

<script src="/static/js/plugins/echarts/echarts-all.js"></script>

js:

var option = {color:['#8378e8','#ff7171','#feda5f','#60dea7','#9a6dec','#40dde1','#38a1d9','#e690d0','#e3387c','#4ba4f7','#ffb771','#96bffd','#e062ac','#e7bcf2','#fe9e7f','#9d96f3'],tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} (L)"},legend: {orient: 'vertical',x: 'left',data: []},toolbox: {show: true,feature: {dataView: {show: true, readOnly: false},magicType: {show: true,type: ['pie', 'funnel']},restore: {show: true},saveAsImage: {show: true}}},calculable: false,series: [{name: '數(shù)據(jù)描述',type: 'pie',selectedMode: 'single',radius: [0, 70],x: '20%',width: '40%',funnelAlign: 'right',itemStyle: {normal: {label: {position: 'inner'},labelLine: {show: false}}},data: []},{name: '數(shù)據(jù)描述',type: 'pie',radius: [100, 140],x: '60%',width: '35%',funnelAlign: 'left',data: []}] };

當(dāng)然了，高版本換低版本也會(huì)出現(xiàn)其他問(wèn)題；

比如柱狀圖漸變屬性沒(méi)有；

3.0

itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#2E91DE'},{offset: 0.5, color: '#70B5EB'},{offset: 1, color: '#CEE8FD'}])} }

2.0

series: [{type: 'bar',barMaxWidth:'36',data: [],label: {normal: {show: true,}} }]

編寫(xiě)不易，如有幫助到您，麻煩點(diǎn)個(gè)贊，感謝！

?

總結(jié)

以上是生活随笔為你收集整理的Echarts饼图无法切换漏斗图问题处理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。