echarts漏斗圖

隨著數據可視化的需求越來越高，echarts漏斗圖作為數據可視化中的一種重要方式，被廣泛應用於各種場景。本文將從多個方面對echarts漏斗圖進行詳細的闡述。

一、echarts漏斗圖不變形

在實際應用中，我們經常會遇到展示數據的值不相等的情況。這就需要使用到echarts漏斗圖的縮放功能來使漏斗圖比例不變形。實現這個功能需要使用echarts中的dataZoom組件，即對漏斗圖組件進行聯動可視化。

option = {
    //設置dataZoom組件
    dataZoom: {
        //水平滾動條顯示位置
        orient: 'horizontal',
        //滾動條寬度
        width: 200,
        //縮放範圍的起始百分比
        start: 0,
        //縮放範圍的結束百分比
        end: 100
    },
    series: {
        //漏斗圖組件
        type: 'funnel',
        ...
    }
};

二、echarts漏斗圖改為金字塔

有時候漏斗圖無法滿足我們的展示需求，需要將漏斗圖改為金字塔形式進行展示，即從下往上進行展示。

option = {
    series: {
        //金字塔組件
        type: 'funnel',
        //數據排序方式
        sort: 'ascending',
        ...
    }
};

三、echarts漏斗圖知識點

使用echarts漏斗圖需要掌握一些基礎的知識點，如：

1、數據格式：漏斗圖的數據格式通常為數組類型，格式為[{value:10, name:’展示值1′},{value:8, name:’展示值2′},{value:6, name:’展示值3′},…]。

2、數據單位：會根據數據也量調整漏斗圖組件的顯示單位，單位為%、$、K、M、B等。可以通過設置formatter屬性進行模板化顯示。

option = {
     series: {
         type: 'funnel',
         data:[
             {value:100, name:'展示值1'},
             {value:80, name:'展示值2'},
             {value:60, name:'展示值3'},
         ],
         //通過設置label的formatter函數設置模板化顯示
         label: {
             formatter: '{a}{b}: {c}M'
         }
     }
};

3、數據樣式：可以通過設置itemStyle屬性設置漏斗圖的樣式、顏色、邊框等。同時，可以設置emphasis屬性對滑鼠懸停的狀態進行設置，如滑鼠懸停時的高亮樣式。

option = {
    series: {
        type: 'funnel',
        data:[
            {value:100, name:'展示值1'},
            {value:80, name:'展示值2'},
            {value:60, name:'展示值3'}
        ],
        //通過設置itemStyle屬性進行樣式設置
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            ...
        },
        //通過設置emphasis屬性進行高亮顯示
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
};

四、echarts漏斗圖怎麼做

做一個簡單的echarts漏斗圖可以參考以下步驟：

1、引入echarts插件庫

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>

2、創建容器，設置div標籤的id和樣式。

<div id="chart" style="width: 600px;height:400px"></div>

3、創建echarts實例並進行數據配置。

var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;

option = {
    series: {
        type: 'funnel',
        data:[
            {value:100, name:'展示值1'},
            {value:80, name:'展示值2'},
            {value:60, name:'展示值3'}
        ],
        ...
    }
};

myChart.setOption(option);

五、echarts漏斗圖圓角

可以使用echarts中的itemStyle屬性的borderRadius屬性來設置漏斗圖的圓角，使漏斗圖更美觀可愛。

option = {
    series: {
        type: 'funnel',
        data:[
            {value:100, name:'展示值1'},
            {value:80, name:'展示值2'},
            {value:60, name:'展示值3'}
        ],
        //通過設置itemStyle屬性中borderRadius屬性設置圓角
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            borderRadius: 10,
            ...
        },
    }
};

六、echarts圖表創建

在使用echarts創建漏斗圖之前需要創建相應的echarts圖表。

//創建echarts圖表
var myChart = echarts.init(document.getElementById('chart'), 'light');

七、echarts漏斗圖圓臉

可以使用echarts中的funnelAlign屬性來設置漏斗圖為圓臉形式。

var option = {
    series: {
        //設置圓臉形式的漏斗圖
        funnelAlign: 'center',
        ...
    }
};

八、echarts漏斗圖設置高度

可以使用echarts中的grid屬性來設置echarts容器的高度，從而使漏斗圖高度得以控制。

option = {
    grid: {
        //設置echarts容器高度
        height: 400
    },
    ...
};

九、echarts漏斗圖怎麼設置三角形

可以使用echarts中的sort和labeLine屬性實現三角形形式的漏斗圖。

option = {
    series: {
        type: 'funnel',
        //排序方式
        sort: 'ascending',
        labelLine: {
            show: false
        },
        ...
    }
};

十、echarts漏斗圖表不改變形狀

可以使用dataZoom組件解決echarts漏斗圖展示不變形的問題。

option = {
    dataZoom: {
        //設置dataZoom組件
        orient: 'horizontal',
        width: 200,
        start: 0,
        end: 100
    },
    series: {
        type: 'funnel',
        ...
    }
};