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],
      },
    },
  ],
});

展示成果