Echarts在线免费图表

 
            const barWidth = 16
const y1Name = ['李一', '张二', '王三', '胡四', '李五']

const option = {
   title: {
      text: '生产人员当日报工时长排名',
      textStyle: {
            color: '#fff',
        }
   },
   backgroundColor:"#0c2d55",
   grid: {
      top: 50,
      left: 80,
      right: 80,
      bottom: 80,
      containLabel: true
   },
   xAxis: {
      name: '生产时长(分钟)',
      nameTextStyle: {
            color: "#fff",
            fontSize: 12,
            padding: [0, 60, 0, 0]
      },
      show: true,
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
         }
      },
      axisLabel: {
         show: true,
         textStyle: {
            fontSize: 18,
            color: '#FFF'
         },
      },
      axisTick: {
         show: true
      },
      axisLine: {
         show: true
      }
   },
   yAxis: [
      {
         yAxisIndex: 0,
         type: 'category',
         inverse: true,
         axisLine: {
            show: true,
            lineStyle: {
               color: '#FFF'
            }
         },
         axisTick: {
            show: false
         },
         splitLine: {
            show: false,
            lineStyle: {
               color: 'rgba(255, 255, 255, 0.3)'
            }
         },
         axisLabel: {
            color: '#FFF',
            fontWeight: 400,
            fontSize: 18,
            rich: {
               a: {
                  width: 100,
                  height: 52,
                  align: 'left',
                  color: '#333',
                  fontSize: 22,
                  borderRadius: 26,
                  padding: [0, 0, 0, 18],
                  backgroundColor: {
                     colorStops: [
                        {
                           offset: 0,
                           color: 'rgba(253, 209, 31, 1)'
                        },
                        {
                           offset: 0.38,
                           color: 'rgba(248, 210, 39, 0.44)'
                        },
                        {
                           offset: 0.74,
                           color: 'rgba(247, 210, 40, 0.20)'
                        },
                        {
                           offset: 1,
                           color: 'rgba(247, 210, 41, 0.10)'
                        }
                     ]
                  }
               },
               a1: {
                  width: 100,
                  height: 52,
                  align: 'left',
                  color: '#333',
                  fontSize: 22,
                  borderRadius: 26,
                  padding: [0, 0, 0, 18],
                  backgroundColor: {
                     colorStops: [
                        {
                           offset: 0,
                           color: 'rgba(58, 133, 206, 1)'
                        },
                        {
                           offset: 0.38,
                           color: 'rgba(107, 174, 244, 0.44)'
                        },
                        {
                           offset: 0.74,
                           color: 'rgba(17, 125, 237, 0.20)'
                        },
                        {
                           offset: 1,
                           color: 'rgba(17, 125, 237, 0.10)'
                        }
                     ]
                  }
               }
            },
            formatter: (name, index) => {
               if (index === 0) {
                  return '{a|' + y1Name[index] + '}'
               } else {
                  return '{a1|' + y1Name[index] + '}'
               }
            }
         }
      },      
   ],
   series: [
      {
         z: 1,
         yAxisIndex: 0,
         type: 'bar',
         barWidth:24,
         legendHoverLink: false,
         symbolRepeat: true,
         silent: true,
         showBackground: true,
         backgroundStyle: {
            color: 'rgba(32, 72, 121, 1)',
            borderRadius: 8
         },
         itemStyle: {
            normal: {
               barBorderRadius: 8,
               color: params => {
                  if (params.dataIndex === 0) {
                     return {
                        colorStops: [
                           {
                              offset: 0,
                              color: 'rgba(239, 93, 32, 1)'
                           },
                           {
                              offset: 1,
                              color: 'rgba(232, 192, 44, 1)'
                           }
                        ]
                     }
                  } else {
                     return {
                        colorStops: [
                           {
                              offset: 0,
                              color: 'rgba(58, 133, 205, 1)'
                           },
                           {
                              offset: 1,
                              color: 'rgba(3, 216, 250, 1)'
                           }
                        ]
                     }
                  }
               }
            }
         },
         label: {
            normal: {
               color: '#333',
               show: true,
               position: [4, -38],
               textStyle: {
                  fontSize: 26,
                  color: '#333'
               },
               rich: {
                  b: {
                     width:60,
                     height:30,
                     borderWidth: 1,
                     borderColor: '#E1BE28',
                     fontSize: 20,
                     color: '#F5CC21',
                     align: 'center',
                     verticalAlign:"middle",
                     borderRadius:15
                  },
                  w: {
                     width: 20
                  }
               },
               formatter: params => {
                  return '{a|' + params.name + '}' + '{w|}' + '{b|' + params.value + '}'
               }
            }
         },
         data: [320, 280, 260, 220, 210],
         animationEasing: 'elasticOut'
      },
   ],
   dataZoom: [
      {
         yAxisIndex: [0, 1],
         show: true,
         type: 'inside',
         startValue: 0,
         endValue: 4
      }
   ]
}