Echarts在线免费图表

 
            const barData = [
   { name: '2021-01', value: 111 },
   { name: '2021-02', value: 106 },
   { name: '2021-03', value: 144 },
   { name: '2021-04', value: 206 },
   { name: '2021-05', value: 222 },
   { name: '2021-06', value: 545 },
   { name: '2021-07', value: 12825 },
   { name: '2021-08', value: 9278 },
   { name: '2021-09', value: 4363 },
   { name: '2021-10', value: 1729 },
   { name: '2021-11', value: 1497 },
   { name: '2021-12', value: 1056 },
   { name: '2022-01', value: 959 },
   { name: '2022-02', value: 524 },
   { name: '2022-03', value: 886 },
   { name: '2022-04', value: 834 },
   { name: '2022-05', value: 739 },
   { name: '2022-06', value: 359 }
]
const title = '北京市应届生就业画像：应届生在京就业人数'
option = {
   backgroundColor: '#001552',
   title: {
      text: title,
      textStyle: {
         fontSize: 24,
         color: '#fff',
         fontWeight: 600,
      },
      x: '5%',
      y: '5%',
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      }
   },
   dataZoom: [
      {
         show: true,
         height: 12,
         bottom: '5%',
         right: '12%',
         showDetail: false,
         brushSelect: false,
         backgroundColor: '#314d70',
         showDataShadow: false,
         borderColor: 'transparent',
         fillerColor: '#3e9bee',
         start: 0,
         end: 70,
         handleSize: '90%',
         zoomLock: true,
         // 画一个圆形
         handleIcon:
            'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z',
         handleStyle: {
            // 两侧缩放手柄的样式配置。
            borderColor: '#cacaca',
            borderWidth: '5',
            shadowBlur: 1,
            background: '#ddd',
            shadowColor: '#ddd'
         }
      }
   ],
   grid: {
      top: 150,
      bottom: 100,
   },
   xAxis: {
      type: 'category',
      boundaryGap: true,
      max: 20,
      splitLine: {
         show: false
      },
      data: barData.map(item => item.name),
      axisLabel: {
         interval: 0,
         rotate: 30,
         textStyle: {
            color: '#92b6d4'
         }
      }
   },
   yAxis: {
      type: 'value',
      show: true,
      splitLine: {
         lineStyle: {
            type: 'dashed',
            color: '#4e6f9e'
         }
      },
      axisLabel: {
         textStyle: {
            color: '#92b6d4'
         }
      }
   },
   series: [
      {
         type: 'bar',
         barWidth: 20,
         itemStyle: {
            normal: {
               color: '#3e9bee',
               label: {
                  show: true,
                  formatter: `{c}人`,
                  position: 'top',
                  textStyle: {
                     fontSize: '12',
                     color: '#92b6d4'
                  }
               }
            }
         },
         data: barData.map(item => item.value)
      }
   ]
};