LM19 2022-09-18 07:21 采纳率: 70%
浏览 18
已结题

Echart滚动条的滑块怎么设置到最上面

在Vue中使用Echarts制作了一个条形图,y轴带滚动条,但滚动条的滑块默认情况下总是在最下面,而且把数据标签也给压住了。
我想调整如下:
1- 默认情况下,滚动条的滑块在最上面。
2- 滚动条在整个数据区的右侧,不压住数据标签。
怎么改代码呢?请指教。

img

代码如下:

 let option = {
        backgroundColor: '#fff',
        title: {
          text: '数据分布',
          padding:[10,800,0,40],     // 四个数字分别为上右下左与原位置距离
        },
        grid: {
          top: 40,
          bottom: 10,
          left: 45,
          right: 20,
          containLabel: true
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: this.x_date,
          axisLabel: {
            fontSize: 20
          },
        },
        series: [
        {
            data: this.s_data,
            type: "bar",
            barGap: 100,
            itemStyle: {
                normal: {
                    color: 'rgba(0, 0, 128, 1)',
                    label: {
                        show: true, //开启显示
                        position: 'right', //在右侧显示
                        textStyle: { //数值样式
                            color: 'black',
                            fontSize: 18
                        },
                    },
                },
             },
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: true,
            yAxisIndex: [0],
            startValue: 0,  // 从头开始
            endValue: 19,   // 一屏展示20条
            left: '97%',
            top: 30,    //上边的距离
            // height: '80%',//组件高度
            // left: 600, //左边的距离
            // right: 8,//右边的距离
            // barWidth: 10000,
            zoomLock: true,
            maxValueSpan: 20,   // 显示数据的最大条数
            start: 0,
            end: 10
          },
          // 滑块的属性
          // {
          //   type: "inside",
          //   show: true,
          //   yAxisIndex: [0,1],
          //   start: 1,
          //   end: 9
          // }
        ],
        tooltip:{
          trigger: "axis",  //触发类型--坐标轴
        }
      };
  • 写回答

1条回答 默认 最新

    报告相同问题?

    相关推荐 更多相似问题

    问题事件

    • 系统已结题 9月26日
    • 创建了问题 9月18日

    悬赏问题

    • ¥15 关于C# 英文打字练习器程序设计
    • ¥15 synchronized
    • ¥15 想用switch完成这个操作,但试了很多遍都无法运行
    • ¥15 wfp应用层设计规则如何能传递到内核层
    • ¥15 关于机器学习创新点几个问题
    • ¥15 python程序编写
    • ¥15 Type-C扩展坞的RTL8153地址硬改
    • ¥15 uniapp websocket 发送 sub 监听后,代码自动发送了 unsub ,解除了监听
    • ¥15 nativefier封装electron的应用遇到alert弹窗后input栏获取不到焦点,confirm不弹出的问题。
    • ¥15 Simulink使用HDL coder生成verilog代码时遇到问题