creating a custom scrollbar in echarts using dataZoom

Question

I am trying to create a scrollbar like the one below using echarts

So far I have managed to get the scroll using dataZoom feature but I haven't been able to style it like a normal scroll bar.

const dataY = [
  'a',
  'b',
  'v',
  'd',
  'e',
  'f',
  'x',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n'
]; // 名称
const dataX = [
  20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15, 35, 50, 30, 40, 50, 60
]; // 数据
option = {
  backgroundColor: '#1C1C1C',
  grid: {
    top: '10%',
    right: '10%',
    left: '10%',
    bottom: '10%'
  },
  yAxis: [
    {
      type: 'category',
      data: dataY,
      axisLine: {
        lineStyle: {
          color: '#333333'
        }
      },
      axisLabel: {
        interval: 0,
        margin: 10,
        color: '#999999',
        textStyle: {
          fontSize: 11
        },
        rotate: '0'
      },
      axisTick: {
        show: false
      }
    }
  ],
  xAxis: [
    {
      axisLabel: {
        padding: [3, 0, 0, 0],
        formatter: '{value}',
        color: '#999999',
        textStyle: {
          fontSize: 11
        }
      },
      axisTick: {
        show: true
      },
      axisLine: {
        lineStyle: {
          color: '#333333'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#333333'
        }
      }
    }
  ],
  dataZoom: [
    {
      type: 'slider',
      yAxisIndex: 0,
      zoomLock: true,
      width: 5,
      right: 10,
      top: '10%',
      bottom: '10%',
      start: 70,
      end: 20,
      brushSelect: false,
      handleSize: '60%',
      showDetail: false,
      backgroundColor: '#000',
      borderColor: '#000',
      opacity: 1,
      brushStyle: false,
      handleStyle: {
        color: '#FF6700',
        borderColor: '#FF6700'
      }
    },
    {
      type: 'inside',
      id: 'insideY',
      yAxisIndex: 0,
      start: 15,
      end: 20,
      zoomOnMouseWheel: false,
      moveOnMouseMove: true,
      moveOnMouseWheel: true,
      backgroundColor: 'transparent'
    }
  ],
  series: [
    {
      type: 'bar',
      data: dataX,
      barWidth: '5',
      itemStyle: {
        normal: {
          color: '#FF6700',
          shadowBlur: 4,
          borderRadius: 100
        }
      },
      label: {
        normal: {
          show: false,
          lineHeight: 4,
          formatter: '{c}',
          position: 'top',
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        }
      }
    }
  ]
};

I am left with a weird scrollbar that works as it should be unfortunately looks really weird.

score 0 · Answer 1 · answered Mar 16 '22 at 16:21

I had the exact same issue as you, and i found a turnaround. Instead of using the datazoom from ECharts as a scrollbar, you can just use the overflow of the div of the chart, and you can costumize it as you want with css. First you need to comment or delete the part of the datazoom in you code and change the html and css as this:

<div class="grid" [style.width.%]="100" [style.height.%]="100" #wrapper>
  <div class="ChartDiv" echarts [options]="options" [style.width.px]="ganttWidth" [style.height.px]="ganttHeight"></div>
</div>

Then you just have to define the css like this:

.grid {
  overflow-y: scroll !important;
  //hidden if you dont want the x-Axis to have a scroll
  overflow-x: hidden !important;
}
//Change the css as you want
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}

With this code, your graph will have this aspect:

Now you just need to change your css as you want the style of this xD.

creating a custom scrollbar in echarts using dataZoom

1 Answers1