Echarts 实现进度条效果

#Echarts 实现进度条效果
#效果图

#上代码

//Echarts 实现进度条效果
data = [
    {
        name: '服务订购数量',
        value: 6133,
    },
    {
        name: '服务订购人次',
        value: 23125,
    },
    {
        name: '微信推送户次',
        value: 43231,
    },
    {
        name: '微信推送条数',
        value: 15340,
    },
];
// 定义使用的颜色数组
const colors = ['blue', 'green', 'yellow ', 'red'];
getArrByKey = (data, k) => {
    let key = k || 'value';
    let res = [];
    if (data) {
        data.forEach(function (t) {
            res.push(t[key]);
        });
    }
    return res;
};
getSymbolData = (data) => {
    let arr = [];
    for (var i = 0; i < data.length; i++) {
        arr.push({
            value: data[i].value,
            symbolPosition: 'end',
        });
    }
    return arr;
};
opt = {
    index: 0,
};
color = ['blue', 'pink'];
data = data.sort((a, b) => {
    return b.value - a.value;
});
console.log(getSymbolData(data));
option = {
    backgroundColor: 'black',
    grid: {
        top: '2%',
        bottom: -15,
        right: 5,
        left: 5,
        containLabel: true,
    },
    xAxis: {
        show: false,
    },
    yAxis: [
        {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, 'name'),
            axisLine: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                interval: 0,
                color: '#fff',
                align: 'left',
                margin: 80,
                fontSize: 13,
                formatter: function (value, index) {
                    return '{title|' + value + '}';
                },
                rich: {
                    title: {
                        width: 165,
                    },
                },
            },
        },
        {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, 'name'),
            axisLine: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                shadowOffsetX: '20px',
                color: ['#fff'],
                align: 'right',
                verticalAlign: 'top',
                //lineHeight: -20,
                textStyle: {
                    color: '#fff', //坐标值得具体的颜色
                    padding: [-20, 0, 0, 0],
                    fontSize: 12,
                },
                fontSize: 12,
                formatter: function (value, index) {
                    return data[index].value;
                },
            },
        },
    ],
    series: [
        {
            name: '条',
            type: 'bar',
            showBackground: true,
            barBorderRadius: 30,
            yAxisIndex: 0,
            data: data,
            barWidth: 5,
            backgroundStyle: {
                color: 'pink',
            },
            itemStyle: {
                normal: {
                    barBorderRadius: 10,
                    color: function (params) {
                        return colors[params.dataIndex];
                        // 取每条数据的 index 对应 colors 中的 index 返回这个颜色
                    },
                },
                // color: 'pink',
                barBorderRadius: 4,
            },
            label: {
                normal: {
                    color: '#fff',
                    show: true,
                    position: [0, '-20px'],
                    textStyle: {
                        fontSize: 12,
                    },
                    formatter: function (a, b) {
                        return a.name;
                    },
                },
            },
        },
    ],
};