項目中有餅狀圖切換漏斗圖的需求，個人實現歷程，記錄下。

1. 去官網查詢餅圖如何切換漏斗圖；

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

然并卵，雖然餅圖出來了，然而并沒有切換漏斗圖的圖標，看來官網示例也有bug哦；

2. 排查原因；

查看官方文檔，發現toolbox-feature-magicType-type屬性中只有line. bar. stack. tiled四個值，并無funnel漏斗屬性值；

繼續排查，發現echarts版本不一致導致

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: '數據描述',type: 'pie',selectedMode: 'single',radius: [0, 70],x: '20%',width: '40%',funnelAlign: 'right',itemStyle: {normal: {label: {position: 'inner'},labelLine: {show: false}}},data: []},{name: '數據描述',type: 'pie',radius: [100, 140],x: '60%',width: '35%',funnelAlign: 'left',data: []}] };

當然了，高版本換低版本也會出現其他問題；

比如柱狀圖漸變屬性沒有；

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,}} }]

編寫不易，如有幫助到您，麻煩點個贊，感謝！

?

總結

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

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