echarts-柱状图实现鼠标滚动效果

实现效果

1、在下载---echarts

npm install echarts --save复制

2、项目中引入echarts

import * as echarts from 'echarts'复制

3、配置echarts---options

option = {
  yAxis: {
    type: 'category'
  },
  xAxis: {
    type: 'value'
  },
  dataZoom: [   
    {
      type: 'inside',
      start: 20,  //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
      end: 100,
      yAxisIndex: 0,  //设置控制yAxis
      zoomOnMouseWheel: false, //设置鼠标滚轮不能触发缩放。
      moveOnMouseWheel: true   //不按任何功能键，鼠标移动能触发数据窗口平移。
    }
  ],
  dataset: { //存放的数据
    source: [
      { keyName: 'key_1', keyValue: 120 },
      { keyName: 'key_2', keyValue: 110 },
      { keyName: 'key_3', keyValue: 100 },
      { keyName: 'key_4', keyValue: 90 },
      { keyName: 'key_5', keyValue: 80 },
      { keyName: 'key_6', keyValue: 70 },
      { keyName: 'key_7', keyValue: 60 },
      { keyName: 'key_8', keyValue: 50 }
    ]
  },
  series: [
    {
      type: 'bar',
      barWidth: 50,
      itemStyle: { //设置渐变色
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: 'orange'
            },
            {
              offset: 1,
              color: 'red'
            }
          ]
        }
      }
    }
  ]
};复制