Echarts在线免费图表

 
            var ydata = ['上海', '北京', '深圳', '天津', '河南'];
var salvProValue = [135, 144, 154, 181, 239];

option = {
    backgroundColor: '#fff',
    grid: {
        left: '2%',
        right: '4%',
        bottom: '2%',
        top: '2%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        },
        formatter: '{b}:{c}',
    },
    xAxis: {
        show: false,
        type: 'value',
    },
    yAxis: {
        type: "category",
        data: ydata,
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            margin: 30,
            width: 16,
            align: "left",
            overflow: "truncate",
            formatter: function (value, index) {
                let ind = index + 1;
                if (ind == ydata.length) {
                    return "{one|" + (ydata.length - index) + "} {a|" + value + "}";
                } else if (ind + 1 == ydata.length) {
                    return "{two|" + (ydata.length - index) + "} {b|" + value + "}";
                } else if (ind + 2 == ydata.length) {
                    return (
                        "{three|" + (ydata.length - index) + "} {c|" + value + "}"
                    );
                }
                if (ydata.length - index > 9) {
                    return (
                        "{five|" + (ydata.length - index) + "} {d|" + value + "}"
                    );
                }
                return "{four|" + (ydata.length - index) + "} {d|" + value + "}";
            },
            rich: {
                a: {
                    color: "#59c9f9",
                },
                b: {
                    color: "#59c9f9",
                },
                c: {
                    color: "#59c9f9",
                },
                d: {
                    color: "#59c9f9",
                },
                // 第一名
                one: {
                    backgroundColor: "#E86452",
                    color: "white",
                    width: 12,
                    height: 16,
                    padding: [1, 0, 0, 5],
                    borderRadius: 10,
                    fontSize: 11,
                },
                // 第二名
                two: {
                    backgroundColor: "#FF9845",
                    color: "white",
                    width: 12,
                    height: 16,
                    padding: [1, 0, 0, 5],
                    borderRadius: 10,
                    fontSize: 11,
                },
                // 第三名
                three: {
                    backgroundColor: "#F6BD16",
                    color: "white",
                    width: 12,
                    height: 16,
                    padding: [1, 0, 0, 5],
                    borderRadius: 10,
                    fontSize: 11,
                },
                // 一位数
                four: {
                    backgroundColor: "rgba(0,0,0,0.15)",
                    color: "white",
                    width: 12,
                    height: 16,
                    padding: [1, 0, 0, 5],
                    borderRadius: 10,
                    fontSize: 11,
                },
                // 两位数
                five: {
                    backgroundColor: "rgba(0,0,0,0.15)",
                    color: "white",
                    width: 16,
                    height: 16,
                    padding: [1, 0, 0, 1],
                    borderRadius: 10,
                    fontSize: 11,
                },
            },
        },
    },
    series: [
        {
            name: 'value',
            type: 'bar',
            zlevel: 1,
            showBackground: true,
         
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        '#FF626E', '#FFBE71'
                    ].map((color, offset) => ({
                        color,
                        offset
                    }))), // 渐变
                },
            },
            label: {
                normal: {
                    color: '#000',
                    show: true,
                    position: [0, '-20px'],
                    textStyle: {
                        fontSize: 16,
                    },
                    formatter: '{b}',
                },
            },
            barWidth: 20,
            data: salvProValue,
        },
        {
            name: '21',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: salvProValue,
            itemStyle: {
                normal: {
                    color: '#f5f8ff',
                },
                emphasis: {
                    color: '#f5f8ff',
                },
            },
            label: {
                normal: {
                    color: '#000',
                    show: true,
                     position:'right',
                distance: 4,
                    textStyle: {
                        fontSize: 16,
                    },
                    formatter: '{c}',
                },
            },
        },
    ],
};