首页 前端知识 echarts 柱形图 Y轴数据多,鼠标滚动显示数据,不缩放

echarts 柱形图 Y轴数据多,鼠标滚动显示数据,不缩放

2024-02-11 10:02:53 前端知识 前端哥 555 78 我要收藏

坐标轴数据太多,只能滚动显示,滚动的时候,不想缩放,单纯平移就好。

滚动后第二屏的截图

 

没滚动的,第一屏的截图

 

option = {
          title: {
            // text: 'World Population',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          axisLine: {
            show: false,
          },

          xAxis: {
            type: 'value',
            min:0,
            max:25, //指定一个x轴的最大值,才会再滚动到第二屏的时候柱形长度不变长
          },
          dataZoom: [
            {
              type: 'inside', // 支持内部鼠标滚动平移
              start: 25,
              end: 100,
              yAxisIndex: 0,
              zoomOnMouseWheel: false, // 关闭滚轮缩放
              moveOnMouseWheel: true, // 开启滚轮平移
              moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
            },
          ],
          yAxis: {
            type: 'category',
            axisTick: {
              show: false,
            },
            minInterval: 1,
            axisLine: {
              show: false,
            },
            // min: 1, // 设置 y 轴显示的最小值
            // max: 50, // 设置 y 轴显示的最大值
            data: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K","L", "M", "N", "O", "P"],
          },

          series: [
            {
              // name: '2011',
              type: 'bar',
              data: [2, 1,1, 1, 1,1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 25],
              boundaryGap: false, // 关闭坐标轴两端的空白
              // min: , // 设置 y 轴显示的最小值
              // max: 11, // 设置 y 轴显示的最大值
              barWidth: 10, // 柱条的宽度,不设时自适应
              itemStyle: {
                color: 'rgba(147,98,246,1)',
              },
              label: {
                show: true,
                position: 'right',
                color: 'rgba(147,98,246,1)',
                fontSize: 14,
              },
            },
          ],
        }

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

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

浏览器调用摄像头

2024-02-25 11:02:09

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