echarts 实现可滚动的横向柱状图 文字显示在上方

 

let xdata = ['大海则选煤厂建筑', '大海则选煤厂2', '大海则选煤厂3', '大海则选煤厂4', '大海则选煤厂5', '大海则选煤厂6', '大海则选煤厂7', '大海则选煤厂8']
let seriesdata = [10, 2, 6, 7, 8, 9, 10, 13]
option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#ffffff'
          },
          borderWidth: '0',
          backgroundColor: 'rgba(0,0,0,0.5)'
        },
        grid: {
          left: '1%',
          right: '3%',
          bottom: '1%',
          top: '3%'
        },
        xAxis: {
          show: false
        },
        yAxis: {
          type: 'category',
          inverse: true,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: true,
            interval: 0, //横轴信息全部显
            splitNumber: 50,
            // boundaryGap: [20, 20],
            textStyle: {
              color: '#111',
              verticalAlign: 'bottom',
              fontSize: 16,
              align: 'left',
              padding: [0, 0, 15, -5]
            }
          },
          data: xdata
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            minValueSpan: 5,
            maxValueSpan: 6,
            yAxisIndex: [0],
            zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
          },
          {
            type: 'slider',
            realtime: true,
            startValue: 0,
            endValue: 5,
            width: '3.5',
            height: '80%',
            yAxisIndex: [0], // 控制y轴滚动
            fillerColor: 'rgba(154, 181, 215, 1)', // 滚动条颜色
            borderColor: 'rgba(17, 100, 210, 0.12)',
            backgroundColor: '#cfcfcf', //两边未选中的滑动条区域的颜色
            handleSize: 0, // 两边手柄尺寸
            showDataShadow: false, //是否显示数据阴影 默认auto
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top: '1%',
            right: '5'
          }
          
        ],
        series: [
          {
            type: 'bar',
            data: seriesdata,
            showBackground: true,
            backgroundStyle: {
              borderRadius: 40
            },
            barWidth: '15',
            itemStyle: {
              barBorderRadius: 20,
              color: (param) =>
              {
                //实现柱状图条 下面四种颜色循环显示
                let colorList = ['#ffa865', '#f8d26b', '#74dcc4', '#47c0ff']
                return colorList[param.dataIndex % 4]
              }
            },
            label: {
              normal: {
                show: true,
                fontSize: 16,
                //数值展示在最右边，通过调节offset显示
                position: 'insideLeft',
                offset: [480, -20],
                textStyle: {
                  color: '#111'
                }
              }
            }
          }
        ]
      };