首页 前端知识 echarts-柱状图实现鼠标滚动效果

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

2024-09-08 02:09:45 前端知识 前端哥 774 976 我要收藏

实现效果

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17917.html
标签
评论
发布的文章

Qt构建JSON及解析JSON

2024-09-29 22:09:49

NPM:配置阿里镜像库

2024-09-29 22:09:46

npm版本切换工具nvm

2024-09-29 22:09:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!