echart柱状图自己总结汇总使用-包含滑动等

let option = {
  title: {
    text: '', // 主标题
    // 主标题文本样式设置
    textStyle: {
      color: '#666',
      fontWeight: 'bold',
      fontSize: '20px',
    },
    // itemGap设置主副标题之间的纵向间距，单位px，默认为10
    itemGap: 4,
    // top指title组件离容器上侧的距离，取值可为具体像素如20, 也可为百分比如'20%', 也可以是'top', 'middle', 'bottom'
    top: 4,
    // left指title组件离容器左侧的距离，取值可为具体像素如20, 也可为百分比如'20%', 也可以是'left', 'center', 'right'
    left: '50%',
    // textAlign指主副标题水平对齐方式，默认左对齐，可选值：'auto'、'left'、'right'、'center'
    textAlign: 'center',
  },
  tooltip: {//鼠标悬浮提示
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: { // 图例
    show: true,
  },
  xAxis: {
    type: 'category',
    data: dateList/*['周一', '周二', '周三', '周四', '周五', '周六', '周日']*/,
    axisLabel: {
      interval: 0,
      rotate: "45",//旋转45°
    }
  },
  yAxis: {
    name: '万元',
    //interval: 300,//刻度间隔
    type: 'value'
  },
  series: [
    {
      name: '预测',
      type: 'bar',
      barWidth:'20%',//系列柱状图宽度
      data: preditList/*[120, 200, 150, 80, 70, 110, 130]*/,
      color:'grey'
    },
    {
      name: '实际',
      type: 'bar',
      barWidth:'20%',
      data: realityList/*[140, 300, 160, 100, 80, 120, 190]*/,
      color:'#2b85e4'
    },
  ],
  // 数据区域缩放组件配置
  dataZoom: [{
    type: 'inside',
    // 数据窗口范围的起始百分比
    start: 0,
    // 数据窗口范围的结束百分比
    end: 30,
    // 是否锁定选择区域（或叫做数据窗口）的大小，如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
    zoomLock: true
  },
  // 手柄的icon相关配置
  {
    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
    handleSize: '80%',
    handleStyle: {
      color: '#fff',
      shadowBlur: 3,
      shadowColor: 'rgba(0, 0, 0, 0.6)',
      shadowOffsetX: 2,
      shadowOffsetY: 2
    }
  }]
};