echarts横向柱状图简单实现方法

  option: {

  tooltip: {

  trigger: 'axis',

  axisPointer: {

  type: 'shadow'

  }

  },

  grid: {

  left: 0,

  top: '8%',

  right: '3%',

  bottom: '8%',

  containLabel: true

  },

  xAxis: {

  type: 'value',

  axisLabel: {

  show: false // 不显示x轴标签

  },

  axisLine: {

  // x轴线的颜色以及宽度

  show: true,

  lineStyle: {color: 'rgba(255,255,255,0.1)'}

  },

  axisTick: {

  show: false // x轴刻度线

  },

  splitLine: { // x轴网格线

  show: true,

  lineStyle: {color: 'rgba(255,255,255,0.1)'}

  }

  },

  yAxis: {

  type: 'category',

  axisTick: { show: false }, // y轴刻度线

  axisLabel: { color: '#fff' }, // y轴文字的配置

  axisLine: {

  //x轴线的颜色

  show: true,

  lineStyle: {color: 'rgba(255,255,255,0.1)'}

  },

  data: ['内科','外科','妇科','儿科','牙科']

  },

  series: [

  {

  name: '人数',

  type: 'bar',

  stack: '总量',

  label: {

  normal: {

  show: true,

  position: 'inside', //显示在柱子内部

  textStyle: { color: '#fff' },

  formatter: '{c}人' //单位

  }

  },

  itemStyle: {

  color: {

  colorStops:[ //柱子的渐变色

  {

  offset: 0,

  color: 'rgba(5, 80, 57, 1)' // 0% 处的颜色

  },

  {

  offset: 1,

  color: 'rgba(13, 253, 178, 1)' // 100% 处的颜色

  }

  ],

  global: false

  }

  },

  barWidth: 20, //柱子的宽度

  data: [88,75,53,39,36]

  }

  ]

  }