zoukankan      html  css  js  c++  java
  • echarts 渐变色进度条

    option = {
        backgroundColor:"#17326b",
        grid:{
            left:"10",
            top:"10",
            right:"0",
            bottom:"10",
            containLabel:true
        },
        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:14,
                    textStyle: {
                          color: '#fff'
                    }
                },
                data:["苹果","香蕉","橘子","梨子","葡萄","柿子","草莓","蓝莓","柚子","橙子"],
                max:10, // 关键:设置y刻度最大值,相当于设置总体行高
                 inverse:true
            },
             {
                type: 'category',
                axisTick:{show:false},
                axisLine:{show:false},
                axisLabel:{
                    color:"black",
                    fontSize:14,
                    textStyle: {
                          color: '#fff'
                    }
                },
                data:[702,350,800,600,550,700,600,800,900,600],
                max:10, // 关键:设置y刻度最大值,相当于设置总体行高
                inverse:true
            }
        ],
        series: [
          {
            name:"条",
            type:"bar",
            barWidth:19,
            data:[80,40,60,10,80,50,70,80,90,60],
            barCategoryGap:20,
            itemStyle:{
                normal:{
                    barBorderRadius:10,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: '#22b6ed'
                    }, {
                      offset: 1,
                      color: '#3fE279'
                    }]),
                }
            },
            zlevel:1
            
          },{
              name:"进度条背景",
              type:"bar",
              barGap:"-100%",
              barWidth:19,
              data:[100,100,100,100,100,100,100,100,100,100],
              color:"#2e5384",
              itemStyle:{
                  normal:{
                      barBorderRadius:10
                  }
              },
          }
        ]
    };
  • 相关阅读:
    ACwing98 分形之城 分形图
    ACwing96 奇怪的汉诺塔 递推
    ACwing95 费解的开关 bfs
    ACwing94 递归实现排列型枚举 dfs
    ACwing93 递归实现组合型枚举 dfs
    递归型枚举总结
    洛谷P2286 宠物收养场 splay
    python之路——初识数据库
    python之路——协程
    python之路——线程
  • 原文地址:https://www.cnblogs.com/yunyin/p/13895695.html
Copyright © 2011-2022 走看看