echarts排名图效果（渐变）

 1. 效果如图，排名图渐变颜色，top3配置不同的颜色

const chartData1 = [{
    name: "天津市",
    value: 64
}, {
    name: "北京市",
    value: 92
}, {
    name: "重庆市",
    value: 103
}, {
    name: "广州市",
    value: 155
}, {
    name: "上海市",
    value: 205
}, {
    name: "南京市",
    value: 250
}, {
    name: "武汉市",
    value: 78
}]
const chartData = chartData1.sort((a, b) => {
    return b.value - a.value
})
var attackSourcesColor = [
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#00ff3c" },
        { offset: 1, color: "#31e6ff" }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#0cf96e" },
        { offset: 1, color: "#31e6ff" }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#3584ed" },
        { offset: 1, color: "#31e6ff" }
    ]),
    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#395CFE" },
        { offset: 1, color: "#2EC7CF" }
    ])
];

function colorFormat(sData) {
    const res = sData.map((el, i) => {
        const color = i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
        return {
            value: el,
            itemStyle: {
                color,
            }
        }
    })
    return res
}

var option = {
    tooltip: {
        show: false,
    },
    color: ["#F7B731"],

    grid: {
        left: "8%",
        right: "8%",
        bottom: "8%",
        top: "8%",
        containLabel: true
    },
    xAxis: {
        type: "value",
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        }
    },
    yAxis: [
        {
            type: 'category',
            interval: 0,
            max:6,
            inverse: true,
            position: "left",
            axisLabel: {
                color: `#fff`,
                fontSize: 14
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            data: chartData.map(el => el.name)
        },
    ],
    series: [
        {
            zlevel: 1,
            name: "利润率排名",
            type: "bar",
            barWidth: "15px",
            data: colorFormat(chartData.map(el => el.value)),
            itemStyle: {
                normal: {
                    barBorderRadius: 10
                }
            },
            label: {
                show: true,
                fontSize: 18,
                color: "#fff",
                textBorderWidth: 2,
                position: "right"
            },
            showBackground: true,
            backgroundStyle: {
                color: "#05325F",
                borderRadius: 10
            }
        },
    ]
};