echarts 图表 dataZoom常用属性解释

需求:项目中需要用到滑动的图表状态

图片:

dataZoom就是图表下面的滑动组件:常用属性详解

option = {
  xAxis: {
    type: 'category',
    data: [3,4,5,6,7,8,9,10,11,12,1,2]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      barWidth: 16,
      data: [90,100,130,136,127,119,60,70,80,120,100,110],
      type: 'bar'
    }
  ],
  dataZoom:[{
    show: true,
    height: 8,
    xAxisIndex: [0],
    bottom: 26,
    start: (4 / 12) * 100,
    end: 100,
    handleIcon: 'path://M0,0 v9h5 v-9h-5 Z',
    handleSize: '0%',  // 手柄的尺寸
    handleStyle: {
      olor: '#e6e6e6'
    },
    textStyle: {   //
      color: 'transparent'  //隐藏手柄两侧的文字
    },
    // 指的是滑动组件的区域颜色和里面线的颜色
    dataBackground: {
      lineStyle: {
        color: 'black'
      },
      areaStyle: {
        color: 'yellow'
      }
    },
    borderColor: 'red',   // 组件边框的颜色
    fillerColor: 'blue',   // 滑动的填充色
    backgroundColor: 'pink'  // 背景色
  },
   //可以随着鼠标滚轮滚动
  {
     type: 'inside',
     show: true,
     height: 15,
     start: 1,
     end: 35
  }]
};

有兴趣的可以把代码复制到echarts官网上跑一遍就知道各个属性对映的效果