echarts之横向单条进度条

最新推荐文章于 2024-05-16 22:16:23 发布

NewBee98k

最新推荐文章于 2024-05-16 22:16:23 发布

阅读量2.7k

点赞数 3

分类专栏：工作笔记前端文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_42557545/article/details/111482420

版权

工作笔记同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

echarts之横向单条进度条

背景

需要将打卡进度可视化

需求

从左往右，颜色从#A4DF4E渐变至#5DC69D，效果如图：
在这里插入图片描述

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>进度条</title>
    <style>
        #progress_bar{
            width:200px;
            height:50px;
        }
    </style>
    <script type="text/javascript" charset="utf-8" src="https://lib.baomitu.com/echarts/5.0.0/echarts.common.min.js"></script>
</head>
<body>
<div id="progress_bar">
    <script>
        bar_canvas('progress_bar', 10,20);
        function bar_canvas(id, val ,all){
            var myChart               = echarts.init(document.getElementById(id));
            var option                = {
                grid                : {
                    left            : '5%',
                    top             : '0',
                    right           : '0',
                    bottom          : '0',
                    containLabel    : true,
                    width           : '93%'
                },
                xAxis               : {
                    type            : 'value',
                    splitLine       : {show: false},
                    axisLabel       : {show: false},
                    axisTick        : {show: false},
                    axisLine        : {show: false},
                },
                yAxis               : {
                    type            : 'category',
                    axisTick        : {show: false},
                    axisLine        : {show: false},
                    axisLabel       : {
                        color       : 'black',
                        fontSize    : 17
                    },
                },
                series              : [
                    {
                        name        : '/'+all,
                        type        : 'bar',
                        barWidth    : 18,
                        data        : [val],
                        label       : {
                            show        : true,
                            //position    : 'middle',
                            offset      : [20,2],
                            formatter   : '{c}{a}',
                            color       : '#fff',
                            fontSize    : 15
                        },
                        itemStyle       : {
                            color: new echarts.graphic.LinearGradient(
                                1, 0, 0, 0,
                                [
                                    {offset: 0, color: '#A4DF4E'},                   //柱图渐变色
                                    // {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
                                    {offset: 1, color: '#5DC69D'},                   //柱图渐变色
                                ]
                            ),
                            barBorderRadius: 9,
                        },
                        zlevel                    : 1
                    },
                    {
                        name                      : '进度条背景',
                        type                      : 'bar',
                        barGap                    : '-100%',
                        barWidth                  : 18,
                        data                      : [all],
                        color                     : '#DCDCDC',//柱条颜色
                        itemStyle                 : {
                            normal                : {
                                barBorderRadius: 9,
                                borderColor: '#FEFEFE',
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            setTimeout(function (){
                window.onresize = function () {
                    myChart.resize();
                }
            },200);
        }
    </script>
</body>

实现效果：

在这里插入图片描述
转载请标注来源https://blog.csdn.net/weixin_42557545/article/details/111482420

NewBee98k

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
echarts之横向单条进度条

echarts之横向单条进度条背景需要将打卡进度可视化需求从左往右，颜色从#A4DF4E渐变至#5DC69D，效果如图：实现代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge" > <meta name="viewport" content
复制链接

扫一扫