開發中遇到要求需要展示錐形柱狀圖，類似如下效果

我知道Highcharts是有角錐圖的配置文檔的，如果項目中使用的是Highcharts，那么就可以直接配置了
Highcharts配置文檔

但是我目前項目都是用的Echarts，如果Highcharts可以做到，那么Echarts也肯定是可以的。
翻閱了一天的配置項文檔后發現
官方文檔：Echarts柱狀圖有一種類型是象形柱圖，象形柱圖是可以設置各種具象圖形元素的柱狀圖，象形柱圖可以被想象為：它首先是個柱狀圖，但是柱狀圖的柱子并不顯示。這些柱子我們稱為『基準柱（reference bar）』，根據基準柱來定位和顯示各種象形圖形（包括圖片）。

解決

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'pictorialBar', // 象形柱圖symbol: 'triangle', // 三角形color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#e877a9'}, {offset: 1, color: 'rgba(232, 119, 169, 0.31)'}]},}] };

總結

以上是生活随笔為你收集整理的Echarts角锥柱形图的全部內容，希望文章能夠幫你解決所遇到的問題。

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