Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

Baidu Echarts 漏斗图

发布于:  

今天这里记录一下做的一个图表, 是用 百度的 echarts 3 来实现的 .

最终效果图:

官方教程地址五分钟上手

这里贴出完整代码, 具体也可以根据各自不同的需求来调整配置.

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图表</title>
	<script src="echarts.min.js"></script>
</head>
<body>
	<div id="chart" style="width: 800px;height:600px;"></div>

<script src="chart.js"></script>	
</body>
</html>

chart.js 代码

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

// start 百度图表 漏斗图 

var option = {
    title: {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['展现1','点击2','访问3','咨询4','订单5', '测试6']
    },
    calculable: true,
    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: '15%',
            //x2: 80,
            bottom: '30%',
            width: '75%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 120,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',//ascending
            gap: 2,
            label: {
                normal: {
                    show: true,
                    formatter:  function (parms) {
                        //console.log('cansh参数:', parms)
                        return ((parms.value / 420) * 100).toFixed(2) + '%'
                    }
                    //position: 'inside'
                },
                emphasis: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 50,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            itemStyle: {
                normal: {
                    /*color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'blue' // 100% 处的颜色
                    }], false),*/
                    borderColor: '#fff',
                    borderWidth: 1
                }
            },
            data: [
                {value: 120, name: '测试6', itemStyle: {
                    normal: {color: '#D47DFA'}
                }},
                {value: 60, name: '访问5', itemStyle: {
                    normal: {color: '#59a6d6'}
                }},
                {value: 40, name: '咨询4', itemStyle: {
                    normal: {color: '#52c7ca'}
                }},
                {value: 20, name: '订单3', itemStyle: {
                    normal: {color: '#40d6ba'}
                }},
                {value: 80, name: '点击2', itemStyle: {
                    normal: {color: '#8A93DD'}
                }},
                {value: 100, name: '展现1', itemStyle: {
                    normal: {color: '#B085ED'}
                }}	                
            ]
        },
        
        {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: '15%',
            //x2: 80,
            bottom: '30%',
            width: '75%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 120,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',//ascending
            gap: 2,
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: function(params) {
                        return params.value + '个'
                    }
                },
                emphasis: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 50,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            },
            data: [
                {value: 120, name: '测试6', itemStyle: {
                    normal: {color: '#D47DFA'}
                }},
                {value: 60, name: '访问5', itemStyle: {
                    normal: {color: '#59a6d6'}
                }},
                {value: 40, name: '咨询4', itemStyle: {
                    normal: {color: '#52c7ca'}
                }},
                {value: 20, name: '订单3', itemStyle: {
                    normal: {color: '#40d6ba'}
                }},
                {value: 80, name: '点击2', itemStyle: {
                    normal: {color: '#8A93DD'}
                }},
                {value: 100, name: '展现1', itemStyle: {
                    normal: {color: '#B085ED'}
                }}
                
            ]
        }
    ]
};


myChart.setOption(option);

需要注意的是只有数据是等差的, 最后效果才会整齐. 这里贴个不是等差的数据的效果图.

厚颜一下 ~^_^~

赏赐