echarts之橫向單條進度條
阿新 • • 發佈:2020-12-21
背景
需要將打卡進度視覺化
需求
從左往右,顏色從#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