echarts实现颜色渐变的漏斗图(包括自定义各种配置项的属性)

实现效果图:

echarts实现颜色渐变的漏斗图(包括自定义各种配置项的属性)_第1张图片

实现代码:

option = {
    color: [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        offset: 0,
        color: '#FB8B29'
    },
    {
        offset: 1,
        color: '#ffffff'
    }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        offset: 0,
        color: '#FFB547'
    },
    {
        offset: 1,
        color: '#ffffff'
    }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        offset: 0,
        color: '#50FFF9'
    },
    {
        offset: 1,
        color: '#ffffff'
    }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        offset: 0,
        color: '#8579FF'
    },
    {
        offset: 1,
        color: '#ffffff'
    }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        offset: 0,
        color: '#2076EF'
    },
    {
        offset: 1,
        color: '#ffffff'
    }])],
    title: {
        show: true,
        text: '漏斗图',
        textStyle: {
            color: '#000'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} 
{b} : {c}%", textStyle: { fontSize: 18 } }, toolbox: { show: false, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, legend: { show: false, data: ['展现', '点击', '访问', '咨询', '订单'] }, calculable: true, series: [{ name: '期望薪资', type: 'funnel', sort: 'ascending', width: '50%', height: '80%', itemStyle: { normal: { label: { position: 'right', textStyle: { color: '#000', fontSize: 18 } } } }, data: [{ value: 20, name: '10K以上' }, { value: 40, name: '8-10K以上' }, { value: 60, name: '5-8K以上' }, { value: 80, name: '3-5K以上' }, { value: 100, name: '3K以上' }] }] };

 

你可能感兴趣的:(echarts实现颜色渐变的漏斗图(包括自定义各种配置项的属性))