echart常用条形图bar配置

直接上代码，注意看备注

// 师生比例条状图
let tearcherStudentBar = Echart.init(document.getElementsByClassName('teacher-student-bar')[0]);
tearcherStudentBar.setOption({
  title: {
    text: '师生比例图',
    ...setEchartTitle, //标题配置，在echart常用标题配置博文中出现
  },
  //关于鼠标移动到数据上的提示工具
  tooltip: {
    show: true,
  },
  //横轴
  xAxis: {
    data: ['学院', '学院', '学院', '学院', '学院'],
    ...setAxis, //在常用轴线配置博文中有出现
  },
  //纵轴
  yAxis: {
  	//规定纵轴的类型
    type: 'value',
    ...setAxis,
    //max 规定最大值  //min 规定最小值  //interval规定值的间隔
  },
  // 数据配置
  series: [
    {
      name: '学生',
      type: 'bar',
      data: [255, 220, 236, 500, 210],
      barWidth: 18, //柱状条的宽度
      itemStyle: {
      	//柱状条的颜色，这里用了一个线性渐变色
        color: new Echart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#28a4fc',
          },
          {
            offset: 1,
            color: 'rgba(41,164,523,0)',
          },
        ]), 
        barBorderRadius: [4, 4, 0, 0], //设置柱状条的边框圆角
      },
      //表内的文字
      //label: {
      	//show: true, //是否显示值
      	//position: 'right', //显示文字值的位置
      	//textStyle: {
        	//显示值的样式
        	//color: '#9fceff',
       	 	//fontSize: 18,
      	//},
    	//},
    },
    {
      name: '老师',
      type: 'bar',
      barWidth: 18,
      data: [155, 120, 136, 110, 110],
      itemStyle: {
      	// 0,0,0,1 分别表示 x，y，x2，y2,用来控制线性渐变的方向
      	//表示x方向上不变，y方向上发生变化
        color: new Echart.graphic.LinearGradient(0, 0, 0, 1, [
        //至少提供两种颜色
          {
            offset: 0, //必须存在，表示这个颜色从0%开始，不得大于1
            color: '#75e4fd',
          },
          {
            offset: 1,
            color: 'rgba(117,228,253,0)',
          },
        ]),
        barBorderRadius: [4, 4, 0, 0],
      },
    },
  ],
});

展示成果