Echarts图表之条形进度条(二)_echarts条形图带进度条百分比-优快云博客

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Echarts图表</title>
       
       <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
   </head>
   <body>
       <div id="main" style="width: 600px;height:400px;"></div>
       <script type="text/javascript">
           var myChart = echarts.init(document.getElementById('main'));
           let myColor = ['#0f89e7', '#f57674', '#54d2e6', '#f9b348']
           // 指定图表的配置项和数据
           var option = {
               backgroundColor: '#000',
               grid: {
                   left: "50",
                   top: "40",
                   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: 4, // 关键：设置y刻度最大值，相当于设置总体行高
                       inverse: true
                   },
                   {
                       type: 'category',
                       axisTick: {
                           show: false
                       },
                       axisLine: {
                           show: false
                       },
                       axisLabel: {
                           color: "black",
                           fontSize: 14,
                           textStyle: {
                               color: '#fff'
                           }
                       },
                       data: [4000, 3000, 2000, 1000],
                       max: 4, // 关键：设置y刻度最大值，相当于设置总体行高
                       inverse: true
                   }
               ],
               series: [{
                   name: "%",
                   type: "bar",
                   barWidth: 13,
                   data: [40, 30, 20, 10],
                   barCategoryGap: 20,
                   label: {
                       show: true,
                       position: 'inside',
                       formatter: '{c}{a}',
                       color: '#fff',
                       fontSize: 12
                   },
                   // 颜色设置
                   itemStyle: {
                       normal: {
                           barBorderRadius: 10,
                           color: function(params) {
                               let num = myColor.length;
                               return myColor[params.dataIndex % num];
                           }
                       }
                   },
                   zlevel: 1
               }, {
                   name: "进度条背景",
                   type: "bar",
                   barGap: "-100%",
                   barWidth: 15,
                   data: [100, 100, 100, 100],
                   color: "rgba(255,255,255,0)",
                   itemStyle: {
                       normal: {
                           barBorderRadius: 10,
                           barBorderColor: '#01a4bf',
                           barBorderWidth: 3,
                       }
                   },
               }]
           };
           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
       </script>
   </body>
</html>