Echarts在线免费图表

 
            /* 数据 */
let nameList = ["00:00-01:00","01:00-02:00","02:00-03:00","03:00-04:00","04:00-05:00","05:00-06:00","06:00-07:00","07:00-08:00","08:00-09:00","09:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00","20:00-21:00","21:00-22:00","22:00-23:00","23:00-24:00"]; // 学科类别
let valueList = [80,55,20,15,5,8,58,50,62,70,68,68,45,52,58,53,52,38,56,64,85,90,95]; // 人数

option = {
   tooltip: {
      trigger: "axis",
      axisPointer: {
         type: 'none'
      },
      position: function (point, params, dom, rect, size) { // 提示框位置
         let x = 0;
         let y = 0;
         //提示框定位
         if (point[0] + size.contentSize[0] < size.viewSize[0]) {
            x = point[0]
         } else if (point[0] > size.contentSize[0]) {
            x = point[0] - size.contentSize[0]
         } else {
            x = "30%"
         }
         if (point[1] > size.contentSize[1]) {
            y = point[1] - size.contentSize[1]
         } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
            y = point[1]
         } else {
            y = "30%"
         }
         return [x, y];
      },
      formatter: params => {
         const {
            name,
            data,
         } = params[0];
         return `
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}</div>
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;">${data}人次</div>`
      },
      extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
   },
   grid: {
      top: '56',//上边距
      right: '16',//右边距
      left: '16',//左边距
      bottom: "16",//下边距
      containLabel: true,
   },
   xAxis: {
      type: 'category',
      data: nameList,
      axisTick: {
         show: false //隐藏X轴刻度
      },
      axisLine: {
         lineStyle: {
            color: "#eaeaea"
         }
      },
      axisLabel: {
         show: true,
         color: 'rgba(0,0,0,0.65)',
         fontSize: 12,
         fontFamily: 'Source Han Sans CN-Regular',
         interval: 1,
      },
   },
   yAxis: [{
      boundaryGap: ['0', '5%'],
      type: 'value',
      name: "人次",
      splitNumber: 5,
      nameTextStyle: {
         color: 'rgba(0,0,0,0.65)',
         fontSize: 12,
         fontFamily: 'Source Han Sans CN-Regular',
         align: "left",
         verticalAlign: "center",
      },
      axisLabel: {
         fontSize: 12,
         color: 'rgba(0,0,0,0.65)',
         fontFamily: 'Source Han Sans CN-Regular',
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(0,0,0,0.09)',
            type: "dashed",
         }
      }
   }],
   series: [{
      type: 'bar',
      data: valueList,
      itemStyle: {
         color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
               offset: 0, color: '#84ACF5' // 0% 处的颜色
            }, {
               offset: 1, color: '#397EF0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
         },
         borderRadius: [4, 4, 0, 0]
      },
      barWidth: 15,
   }]
};