Echarts在线免费图表

 
            var yData = [
   '总学分预警',
   '公共必修学位课预警',
   '专业学位课预警',
   '专业选修课预警',
   '公共必修非学位课预警',
   '公共选修非学位课预警'
]; // y轴数据
var xData = [10, 11, 13, 14, 15, 10]; // 数量

option = {
   tooltip: {
      trigger: 'item',
      position: function (point, params, dom, rect, size) {
         // 固定在顶部
         return [point[0], '50%'];
      },
      formatter: (params) => {
         return `
      <div style="font-size:12px;color:rgba(0,0,0,0.85);margin-bottom:10px;font-family:Source Han Sans CN-Medium;font-weight: 500;margin-bottom:23px">${params.name}</div>
      <div style="font-size: 12px;font-family: Source Han Sans CN-Normal;font-weight: 400;color: rgba(0,0,0,0.65);">当前预警<span style="font-size: 16px;font-family: Source Han Sans CN-Bold;font-weight: bold;color: #397EF0;;margin:2px">${params.value}</span>人次</div>
    	`;
      },
      extraCssText: 'background-color:rgba(255, 255, 255, 0.8);padding:12px;box-shadow: 0px 3px 12px 1px rgba(57,126,240,0.22);border-radius: 4px;filter: blur(undefinedpx);border:none;'
   },
   grid: {
      left: '0',
      right: '60',
      bottom: '22', //下边距,
      top: '80',
      containLabel: true
   },
   xAxis: {
      type: 'value',
      axisLabel: {
         //坐标轴字体颜色
         textStyle: {
            color: 'rgba(0,0,0,0.85)',
            fontSize: '12',
            fontFamily: 'Source Han Sans CN-Regular'
         }
      },
      axisLine: {
         show: false
      },
      axisTick: {
         //y轴刻度线
         show: false
      },
      splitLine: {
         //网格
         show: true,
         lineStyle: {
            color: 'rgba(0, 0, 0, 0.1)',
            type: 'dashed'
         }
      }
   },
   yAxis: {
      type: 'category',
      inverse: true,
      axisLabel: {
         //坐标轴字体颜色
         textStyle: {
            color: 'rgba(0, 0, 0, 0.85)',
            fontSize: '12',
            fontFamily: 'Source Han Sans CN-Regular'
         }
      },
      axisLine: {
         lineStyle: {
            color: '#CCCCCC'
         }
      },
      axisTick: {
         //y轴刻度线
         show: false
      },
      splitLine: {
         //网格
         show: false
      },
      data: yData
   },
   series: [
      {
         name: '当前预警人次',
         type: 'bar',
         barWidth: '12px', //柱子宽度
         color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            //渐变色
            {
               offset: 1,
               color: '#EE607E'
            },
            {
               offset: 0,
               color: '#FFA66A'
            }
         ]),
         itemStyle: {
            barBorderRadius: [2, 2, 0, 0]
         },
         data: xData
      }
   ]
};