Echarts 可视化之漏斗图、仪表盘

1、仪表盘

仪表盘是一种表示事件进度的可视化图，在Echarts中，绘制仪表盘需要先将 series 中的 type 参数 1 值设置为 gauge 。

DOCTYPE html>



    
    



    
    
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            tooltip: {
                formatter: '{a}{b}:{c}%'
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                },
            },
            series: [{
                name: '',
                type: 'gauge',
                detail: {
                    formatter: '{value}%'
                },
                data: [ { value: 65, name: '完成率' }]
            }
            ]
        };
        myChart.setOption(option);
    

2、漏斗图

funnel

DOCTYPE html>


    
    





var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: '漏斗图',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a}{b}:{c}%'
    },
    toolbox: {
        feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
        },
    },
    legend: {
        data: ['注册', '登录', '加购', '下单', '付款'],
    },
    series: [{
        name: '漏斗图',
        type: 'funnel',
        left: '10%',
        top: 60,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
            show: true,
            position: 'inside'
        },
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 10
        },
        emphasis: {
            label: {
                fontSize: 25
            }
        },
        data: [
            { value: 100, name: '注册' },
            { value: 86, name: '登录' },
            { value: 70, name: '加购' },
            { value: 35, name: '下单' },
            { value: 25, name: '付款' }
        ]
    }
    ]
};
myChart.setOption(option);