echarts dataZoom用按钮代替鼠标滚轮实现同样效果

2024.06.19今天我学习了echarts dataZoom如何用按钮来控制放大缩小的功能,

效果如下:

通过控制按钮来实现图表放大缩小数据的效果。

步骤如下:

一、写缩放按钮,以及图表数据。

二、设置初始位置的变量,我这边是七个图表数据一个周期,所以初始位置为94。

三、缩放按钮方法,点击+号 +1个距离  点击-号 -1个距离,记得给限制,比如最大只能放大到图表的startValue:100 endValue:100,最小到图表x轴的总长度 startValue:100 - xAxis.length   endValue:100。

四、图表dataZoom动态渲染,startValue:this.startValue。

代码如下:

<template>
   <div>
     <el-button icon="el-icon-plus" @click="dataZoom_click('add')"/>
     <el-button icon="el-icon-minus" @click="dataZoom_click('sub')"/>
     <div ref="line" style="width:"200px";height="200px""/>
   <div>
</template>

<script>
export default{
  data(){
    return{
        startValue:94,//默认偏移距离是94

        echarts_xAxis:['1月','2月','3月','4月','5月','6月'],//图表x轴的数据,我这边需求是要图表数据超过五个才显示这个缩放按钮,如果没有限制可以不用
     }
  },
  mounted(){
    this.get_line_echarts = this.$echarts.init(this.$refs.line);
    this.get_line_echarts_line();//获取图表数据
  },
  methods:{
    // 缩放按钮
    dataZoom_click(type){
       if (type== 'add' && this.startValue< 100) {//防止位置溢出
        this.startValue = this.startValue + 1;//偏移位置加1
          } else if (type== 'sub' && this.startValue> 101 - this.startValue.length) {
        this.startValue = this.startValue - 1;//偏移位置减1
          }
    },
    // 图表数据
    get_line_echarts_line(){
      let option = {
        xAxis:{},
        yAxis:{},
        series:[{}]
      }
      
          // 重点
          option.dataZoom = [
            {
              type: 'slider',//slider表示有滑动块的,inside表示内置的
              startValue: this.startValue,//默认为0  可设置滚动条从在后进行展示
              endValue: 100,//默认为100
              show: true,
              handleSize: 0,//滑动条的 左右2个滑动条的大小
              height: 12,//组件高度
              left: '5%', //左边的距离
              right: '5%',//右边的距离
              bottom: this.screen_width < 1000 ? -2 : 2,//右边的距离
              borderColor: "#eee",//边框颜色
              fillerColor: '#9f9d9d',//滚动条颜色
              backgroundColor: '#eee',//两边未选中的滑动条区域的颜色
              showDataShadow: false,//是否显示数据阴影 默认auto
              showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
            },
            {
              show: true,
              type: 'inside',
              startValue: this.startValue,
              endValue: 100
            }];
 
          // this.get_line_echarts.clear();
          this.get_line_echarts.setOption(option);
    }
  }
}
</script>

  • 40
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
EchartsdataZoom是用于区域缩放的组件,它能够让用户自由关注数据的细节信息,或者概览整体数据,或者去除离群点的影响。它支持内置型数据区域缩放组件(dataZoomInside)、滑动条型数据区域缩放组件(dataZoomSlider)和框选型数据区域缩放组件(dataZoomSelect)三种类型。其中dataZoomInside是内置于坐标系中,通过鼠标拖拽、鼠标滚轮或手指滑动来缩放或漫游坐标系。dataZoomSlider则是以单独的滑动条形式提供缩放或漫游功能。 在Echarts中,可以使用dataZoom配置项来定义区域缩放的具体设置。例如,通过定义id为'insideX'和'sliderX'的dataZoom实例,可以分别实现内置型和滑动条型的区域缩放。具体配置可以在官方链接中找到更多内容。 dataZoom组件主要用于对数轴进行数据窗口缩放和平移操作。它可以通过调整视图窗口大小来缩放数据范围,或者通过平移视图窗口来改变数据显示位置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts实现获取datazoom的起始值(包括x轴和y轴)](https://download.csdn.net/download/weixin_38609765/12924971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [ECHARTS学习之dataZoom组件详解](https://blog.csdn.net/qq_44610701/article/details/121394969)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [ECharts学习四 --- 数据区域缩放组件(dataZoom)](https://blog.csdn.net/NN_nan/article/details/83015188)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敲代码无敌小奶龙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值