[echarts]横向柱状图的两种简便画法

示例图

第一种方法： 可以随意控制y左轴和y右轴的显示位置

let option = {
    // 柱状图的位置
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0',
      containLabel: false // 图表两侧是否留白
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    xAxis: {
      show: false,
      type: 'value'
    },
    yAxis: [
      // 左轴 
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          inside: true,
          zlevel: 2,
          color: '#fff'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        data: props.dataX
      },
      // 右轴
      {
        type: 'category',
        inverse: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          inside: true,
          formatter: '{value}s',
          color: 'black'
        },
        data: props.dataY,
      },
    ],
    series: [
      {
        zlevel: -1, // 层级
        type: 'bar', 
        barWidth: 30, // 内柱条的宽度
        // animationDuration: 1500, // 内柱条的动画显示时间
        showBackground: true,
        // 内柱条样式
        itemStyle: {
          color: '#2596FF',
        },
        // ------------------数据及其样式----------------------------
        // 内柱条的数据
        data: props.dataY,
        align: 'center'
      },
    ],
  }

第二种：y右轴的显示文字不能随意控制位置，此种写法是文字显示只能跟在内柱条的后面

let option = {
    // 柱状图的位置
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0',
      containLabel: false // 图表两侧是否留白
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    xAxis: {
      show: false,
      type: 'value'
    }, 
    yAxis: {
      type: "category",
      triggerEvent: true,
      data: props.dataX,
      axisLine: { show: false },  //不显示坐标轴
      axisTick: { show: false },  //不显示坐标轴刻度线     
      axisLabel: {
        inside: true, // 坐标显示在轴内侧
        zlevel: 1,
        color: '#ccc',
      },
      splitLine: {
      	show: false,
      },      
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    series: [
      {
       	name: '',
        zlevel: -1,
        type: "bar",
        color: '#2596FF',
        barWidth: 30,
        showBackground: true,
        backgroundStyle: {
           color: 'rgba(180, 180, 180, 0.2)'
        },
        label: {
          show: true,
          position: "right",
          color: "red",
          fontSize: "12px",
          formatter: '{c}s',      
        },
        data: props.dataY,
      },
    ],
  }