echarts-进度条

基本演示

  option = {
       title: {
           text:"xxxx统计",
           left: '1%',
           top: '0%',
           textStyle: {
               color: "#2E3033",
               fontSize:18,
           },
       },
       tooltip: {
           axisPointer: {
               type: "shadow",
           },
       },
       grid: {
           top: '9%',
           left: "12%",
           right:"22%",
           bottom:"0%",
       },
       xAxis: {
           type: 'value',
           splitLine: {
               show: false //去掉辅助线
           },
           axisLine: {
               show: false,
           },
           axisLabel: {
               show: false,
           }

       },
       yAxis: {
           type: 'category',
           data: ['栋','xx','xx','xx','xx','xx','xx'],//y轴数据
           splitLine: {
               show: false //去掉辅助线
           },
           axisLine: {
               show: false,
           },
           axisTick: {
               show: false
           },
           axisLabel: {
               color: '#2E3033',
               fontSize:14,
           }
       },
       series: [{
           data: [566228.07,877228.07,955228.07,436228.07,498228.07,326228.07,854228.07],
           type: 'bar',
           showBackground: true,
           backgroundStyle: {
               color: '#BDE2EF',
               borderRadius:5,
           },
           barWidth: 10,
           itemStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                           offset: 0,
                           color: '#25B9EB'
                       },
                       {
                           offset: 1,
                           color: '#25B9EB'
                       }
                   ], false),
                   barBorderRadius: [5, 5, 5, 5],
               }
           },
           label: {
               normal: {
                   show: true,
                   position: [270, 0],   //value的位置
                   color: '#8E949D', //值的颜色
                   fontSize: 14,
               }
           }
       }]
   };

这里数值位于右侧，但是是固定宽度，所以在不同尺寸电脑上看到的有所差别，不能自适应

进度条动态固定到右侧

下面方法可以做到label自适应到右侧
思路：动态获取整个标签宽度，减去一个固定值即可

 var chartW=$("#Chart").width();
 chartW=chartW-0.30*chartW;
 
 position:[chartW,0],//重点是这里！！！！

var chartW=$("#Chart").width();
chartW=chartW-0.30*chartW;
option = {
     title: {
         text:"xxxx统计",
         left: '1%',
         top: '0%',
         textStyle: {
             color: "#2E3033",
             fontSize:18,
         },
     },
     tooltip: {
         axisPointer: {
             type: "shadow",
         },
     },
     grid: {
         top: '9%',
         left: "12%",
         right:"22%",
         bottom:"0%",
     },
     xAxis: {
         type: 'value',
         splitLine: {
             show: false //去掉辅助线
         },
         axisLine: {
             show: false,
         },
         axisLabel: {
             show: false,
         }

     },
     yAxis: {
         type: 'category',
         data: ['栋','xx','xx','xx','xx','xx','xx'],//y轴数据
         splitLine: {
             show: false //去掉辅助线
         },
         axisLine: {
             show: false,
         },
         axisTick: {
             show: false
         },
         axisLabel: {
             color: '#2E3033',
             fontSize:14,
         }
     },
     series: [{
         data: [566228.07,877228.07,955228.07,436228.07,498228.07,326228.07,854228.07],
         type: 'bar',
         showBackground: true,
         backgroundStyle: {
             color: '#BDE2EF',
             borderRadius:5,
         },
         barWidth: 10,
         itemStyle: {
             normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                         offset: 0,
                         color: '#0077D5'
                     },
                     {
                         offset: 1,
                         color: '#0077D5'
                     }
                 ], false),
                 barBorderRadius: [5, 5, 5, 5],
             }
         },
         label: {
             normal: {
                 show: true,
                 // position: [270, 0],   //value的位置
                 // position: 'right',
                 position:[chartW,0],//重点是这里！！！！
                 color: '#8E949D', //值的颜色
                 fontSize: 14,
             }
         }
     }]
 };