Js + echarts 漏斗圖

標籤：疊加   ack   for   width   lines   var   element   none   fonts   

var drawFunnelChart=function(chartId,titleText, dataArr,nameArr,gapArr,minValue){
    var option = {
        title: {
            text: titleText,
            subtext: ‘‘
        },
        tooltip: {
            trigger: ‘item‘,
            formatter: "{a} <br/>{b} : {c}"
        },
        legend: {
            data: nameArr
        },
        calculable: true,
        color: [‘#3C8DBC‘,‘#B1D1E4‘],
        series: [
            {
                name:‘漏斗圖‘,　　　　　　//多個對象疊加，產生一個表徵圖多個label
                type:‘funnel‘,
                left: ‘20%‘,
                top: 60,
                //x2: 80,
                bottom: 60,
                width: ‘60%‘,
                min: minValue,
                /* max: maxValue,*/
                minSize: ‘20%‘,
                maxSize: "100%",
                sort: ‘none‘,
                //funnelAlign:‘center‘,
                gap: 2,
                label: {
                    normal: {
                        show: true,
                        position: ‘center‘,
                        formatter: function(data){
                            return data.value
                        },
                        rich: {
                            a: {
                                color: ‘#999‘,
                                lineHeight: 18,
                                align: ‘center‘
                            },
                            hr: {
                                borderColor: ‘#aaa‘,
                                width: ‘100%‘,
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                color: ‘#000‘,
                                fontSize: 12,
                                lineHeight: 33
                            },
                            per: {
                                color: ‘#000‘,
                                /*backgroundColor: ‘#fff‘,*/
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    },
                    emphasis: {
                        textStyle: {
                            fontSize: 12
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: ‘solid‘
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: ‘#fff‘,
                        borderWidth: 1
                    }
                },
                data: dataArr
            },
            {
                name:‘漏斗圖‘,
                type:‘funnel‘,
                left: ‘20%‘,
                top: 60,
                //x2: 80,
                bottom: 60,
                width: ‘60%‘,
                // height: {totalHeight} - y - y2,
                min: minValue,
                /* max: maxValue,*/
                minSize: "20%",
                maxSize: "100%",
                sort: ‘none‘,       //不排序，按照給定資料的順序
                //funnelAlign:‘center‘,
                gap: 2,
                label: {
                    normal: {
                        show: true,
                        position: ‘left‘,
                        formatter: function(data){　　//多個對象疊加，產生一個表徵圖多個label

                            //if(data.dataIndex <= gapArr.length-1){
                                return ‘{per|轉化率：‘ + gapArr[data.dataIndex] + ‘}‘;
                            //}
                        },
                        rich: {
                            per: {
                                color: ‘#000‘,/*‘#3CABE7‘,*/
                                backgroundColor: ‘#fff‘,
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    },
                    emphasis: {
                        textStyle: {
                            fontSize: 12
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: ‘solid‘
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: ‘#fff‘,
                        borderWidth: 1
                    }
                },
                data: dataArr
            },
            {
                name:‘漏斗圖‘,
                type:‘funnel‘,
                left: ‘20%‘,
                top: 60,
                //x2: 80,
                bottom: 60,
                width: ‘60%‘,
                // height: {totalHeight} - y - y2,
                min: minValue,
                /*max: maxValue,*/
                minSize: "20%",
                maxSize: "100%",
                sort: ‘none‘,
                //funnelAlign:‘center‘,
                gap: 2,
                label: {
                    normal: {
                        show: true,
                        position: ‘right‘,
                        formatter: function(data){//多個對象疊加，產生一個表徵圖多個label

                            return ‘{b|‘ + data.name + ‘}‘
                        },
                        rich: {
                            b: {
                                color: ‘#000‘,
                                fontSize: 12,
                                lineHeight: 33
                            },

                        }
                    },
                    emphasis: {
                        textStyle: {
                            fontSize: 12
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: ‘solid‘
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: ‘#fff‘,
                        borderWidth: 1
                    }
                },
                data: dataArr
            },
        ]
    };

    var myChart=echarts.init(document.getElementById(chartId));
    myChart.setOption(option);
    window.addEventListener(‘resize‘,myChart.resize)
};

Js + echarts 漏斗圖