echarts 漏斗图示例

把以下代码复制粘贴到:https://gallery.echartsjs.com/editor.html 可以预览看到效果图。

option = {
    color: ['#298DFF', '#2EC25B', '#FBD337'],
    backgroundColor: '#FFFFFF',
    barWidth: 8,
    title: {
        text: '漏斗图'
    },
    tooltip: {
        axisPointer: {
            type: 'shadow'
        },
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    grid: {
        left: '1%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    series: [
        {
            name: '',
            type: 'funnel',
            left: '5%',
            right: '35%',
            itemStyle: {  //去掉默认白色边框线
                borderWidth: 0,
                borderColor: '#fff'
            },
            label: {
                show: true,
                formatter: "{b|{b}} "+"{b|:}"+"\n\n{a|{c}}",
                rich: {
                    a: {
                        color: '#595959',
                        fontSize: 12
                    },
                    b: {
                       color: '#595959',
                       fontSize: 12
                    }
                }
            },
            labelLine: {
                length: 50,
                lineStyle: {
                    width: 1,
                    color: '#ECECEC',
                    type: 'solid'
                }
            },
            data: [
                { name: '数量1',value: '7500.00' },
                { name: '数量2',value: '4000.00' },
                { name: '数量3',value: '2000.00' }
            ]
        }
    ]
}
posted @ 2020-10-29 10:29  叶子玉  阅读(2690)  评论(0编辑  收藏  举报