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

aaabugaaa

已于 2023-07-28 11:24:42 修改

阅读量900

点赞数

文章标签： echarts 前端 javascript

于 2023-07-28 11:21:58 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65039133/article/details/131975975

版权

该文介绍了如何在项目中使用Echarts，包括通过npm安装Echarts，导入库，以及配置数据窗口和条形图的细节。具体展示了配置数据Zoom的start和end属性，禁用鼠标滚轮缩放，启用平移，以及创建线性渐变色的条形图系列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

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'
            }
          ]
        }
      }
    }
  ]
};