Echarts漏斗图如何自定义颜色

在 ECharts 中，要自定义漏斗图的颜色，可以通过设置 series 中的 itemStyle 属性来实现。以下是一个示例：

option = {
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: 100,
            top: 60,
            bottom: 60,
            width: 200,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 2
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'}
            ]
        }
    ]
};

在这个示例中，我们设置了 itemStyle 的 borderColor 和 borderWidth 属性来自定义漏斗图的边框颜色和宽度。如果你想要自定义漏斗图的内部颜色，可以使用 areaStyle 属性，如下所示：

option = {
    series: [
        {
            // ... 其他配置项
            areaStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#c23531'}, // 0% 处的颜色
                        {offset: 0.5, color: '#2f4554'}, // 50% 处的颜色
                        {offset: 1, color: '#61a0a8'} // 100% 处的颜色
                    ],
                    false
                )
            },
            // ... 其他配置项
        }
    ]
};

在这个示例中，我们使用了 echarts.graphic.LinearGradient 来创建一个线性渐变，然后将其应用到 areaStyle 的 color 属性上。这样，漏斗图的内部颜色就会根据设置的渐变进行变化。