Echarts 实现进度条效果

原创

已于 2025-04-28 21:00:43 修改 · 3.5k 阅读

收录于

当前文章被以下社区和专栏收录：

于 2021-11-24 17:16:57 首次发布

该篇博客展示了如何利用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) =>