echarts通过dataZoom实现单击图像滑动

这篇具有很好参考价值的文章主要介绍了echarts通过dataZoom实现单击图像滑动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实现原理;
1.option中配置初始化的dataZoom属性,并确定初始化数据展现位置
2.通过graphic属性配置图标及文本,并添加点击事件onclick;
3.通过dispatchAction的type: ‘dataZoom’,实现数据的最终展现。
效果:点击1图标,图像向左移一条数据,点击2图标,图像右移一条数据
echarts通过dataZoom实现单击图像滑动,echarts,前端,javascript,html5,vue.js文章来源地址https://www.toymoban.com/news/detail-794979.html

  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 400px;height:300px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
	let xData=[];
	let yData =[];
	let xdataLen = xData.length
	let startIndex=0;//开始下标
	let intervalNum= 4;//一屏展示数据条数-1,设置4,说明一屏展示数据是5条

      // 指定图表的配置项和数据
   	let	option: {
        animation:false,
        tooltip: {
          //提示框组件。
          axisPointer: {
            //选中的线条样式
            type: "line",
            lineStyle: {
              color: "rgba(85,125,231,0.1)",
              width: 10,
              type: "solid"
            }
          },
          formatter: (value) => {
          		//数据处理逻辑
           		return ....
          },
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.4)",
          textStyle: {
            color: "#fff",
            fontWeight: "500"
          }
        },
        grid: {
          //绘图网格
          left: "0%",
          right: "5%",
          bottom: "0%",
          top: "8%",
          containLabel: true //y轴上的数值自适应,不会超出放不下
        },
        xAxis: {
          type: "category",
          data: xData,//x轴的数据,
          axisLabel: {
            interval: 0,
            formatter: (val)=> {
             //数据处理逻辑	
              return 处理后的值;
            }
          },
          axisLine: {}
        },
        yAxis: {
          type: "value",
          data: yData,//y轴的数据,
          axisLabel: {
            formatter(value) {
              return 处理后的值;
            }
          },
          splitLine: {
            show: true
          }
        },
        series: [
          {
            symbolSize: 4, //圆的大小
            name: "A",
            type: "line",
            itemStyle: {
              color: "#FF8A01",
              lineStyle: {
                color: "#FF8A10"
              }
            }
          },
          {
            name: "B",
            symbolSize: 3,
            type: "line",
            itemStyle: {
              color: "#509AFE",
              lineStyle: {
                color: "#509AFE"
              }
            }
          }
        ],
        dataZoom:[
          {
            show: false,
            type: 'slider',
            xAxisIndex: 0, //设置为x轴上 此处0代表第一个x轴,也可以用数组[0]
            zoomLock: true, // 开启之后能通过鼠标左右拉动,不能滚动显示
            startValue: startIndex,  //X轴展示的开始值下标  -- 开始的值
            endValue: startIndex+intervalNum// 结束的值的下标,根据开始下标和结束下标可以控制一屏展示多少条数据,此处是展示下标为startIndex-endIndex  的数据
          }
        ],
        //graphic设置了触发点击事件的图标
        graphic:[
          {
            type: 'group',
            left: 30,
            top: 'center',
            id: 'slideStep',
            z: 100,
            onclick: ()=>{ handleGo(0) },
            children: [
              {
                type: 'rect',
                id: 'slicestep',
                left: 'center',
                top: 'middle',
                shape: {
                  width: 30,
                  height: 30,
                  r: [15],
                },
                style: {
                  fill: 'rgba(0,0,0,0.3)',
                }
              },
              {
                type: 'text',
                left: 'center',
                top: 'middle',
                style: {
                  fill: '#fff',
                  text: '<',
                  font: '20px Microsoft YaHei'
                }
              }
            ]
          },
          {
            type: 'group',
            id: 'addstep',
            right: 0,
            z: 100,
            top: 'center',
            invisible: false,
            ignore: true,
            onclick: ()=>{ handleGo(1) },
            children: [
              {
                type: 'rect',
                left: 'center',
                top: 'middle',
                shape: {
                  width: 30,
                  height: 30,
                  r: [15],
                },
                style: {
                  fill: 'rgba(0,0,0,0.3)',
                }
              },
              {
                type: 'text',
                left: 'center',
                top: 'middle',
                style: {
                  fill: '#fff',
                  text: '>',
                  font: '20px Microsoft YaHei'
                }
              }
            ]
          }
        ]
      }
		//handleGo方法是实现修改图像展示开始值、结束值
    const handleGo =(val)=>{ 
      if(startIndex == 0 && val ===0 || startIndex  == (xdataLen.value - 5)  && val === 1){
      }else {
        startIndex  = val === 1 ? ++startIndex  : --startIndex ;
        myChart.dispatchAction({
          type: ' ',
          dataZoomIndex: 0,
          startValue: startIndex ,
          // 结束位置的数值
          endValue: startIndex + intervalNum
        })
      }
    }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>

到了这里,关于echarts通过dataZoom实现单击图像滑动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全

    🍓 作者主页:💖仙女不下凡💖 🍓 前言介绍:以下👇内容是我个人对于该技术的总结,如有不足与错误敬请指正! 🍓Echart官网地址:https://echarts.apache.org/examples/zh/index.html#chart-type-line 🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续

    2023年04月11日
    浏览(43)
  • 解决echarts配置滚动(dataZoom)后导出图片数据不全问题

    先展现一个echarts,并配置dataZoom,每页最多10条数据,超出滚动 效果: 调用echarts中getDataURL获取图表的数据 URL 问题来了:如数据不分页则可以下载全数据,如数据分页了则只能下载出可视区内容,如何解决? 解决思路:echarts最终生成了canvas,canvas的宽高就是当前可视区的宽

    2024年01月19日
    浏览(42)
  • echarts图标设置dataZoom拖拽时间轴时自动调整两侧文字的位置

    在vue项目中使用到echarts绘制图表时使用到dataZoom来选择展示某个时间区间的数据,由UI测试后发现把手柄拖拽到开始和结束时,显示的文本会被遮挡: 产品给出的解决方法是当拖到最后的时候将这个文本显示在滑块的内侧,或者是上方,避免被遮挡住;但是去看了echarts的文档

    2024年02月04日
    浏览(38)
  • uniapp 开发微信小程序使用echart的dataZoom属性缩放功能不生效!bug记录!

    在本项目中使用的是这个echart库 在项目中添加了dataZoom配置项但是不生效,突然想到微信小程序代码大小的限制,之前的echarts.js是定制的,有可能没有加dataZoom组件。故重新定制echarts.js。之前用的echarts版本是5.0.0,这次也是定制同样的版本,但是报错,按照之前的经验判断,

    2024年02月11日
    浏览(49)
  • 基于GSYVideoPlayer自定义布局结合RecyclerView高仿抖音实现上下滑动双击屏幕点赞/单击暂停,拖动进度条实时改变时间以及进度条放大

    注意代码量有点多,但是你不要就此放弃,看效果图决定你需不需该需求😀并且代码好理解基本上都是基于GSYVideoPlayer的方法进行重写改造出来的,请放心食用 GSYVideoPlayer是一款开源并且强大的Android视频播放器方便你们阅读了GSYVideoPlayer更快速的上手GSYVideoPlayer框架地址 效果

    2024年02月03日
    浏览(138)
  • 使用JavaScript实现页面滑动切换效果

      使用JavaScript实现页面滑动切换效果 在现代Web页面设计中,页面滑动切换效果已经成为了一种常见的设计要求,能够提升用户体验,增加页面的交互性。本文将通过JavaScript来实现这一效果。 首先,我们需要在HTML中添加一些基础结构和样式。以下是一个简单的例子:   在

    2024年02月13日
    浏览(53)
  • vue中通过JavaScript实现web端鼠标横向滑动&触控板滑动效果-demo

    JavaScript实现web端鼠标横向滑动触控板滑动效果  支持鼠标拖动滑动触控板滑动效果 web端实现滑动,就是对鼠标按下、鼠标松开、鼠标移动事件进行监听 在Vue中实现鼠标横向滑动触控板滑动效果可以通过以下步骤实现: 首先在Vue中创建一个父组件,在该组件中引入子组件或者

    2024年02月15日
    浏览(35)
  • 通过Echarts怎样实现立体柱状图

    大家好,我是梁木由。之前在做大屏可视化项目时,UI设计了一个立体形状的柱状图,根据之前做的一些图表的项目没有能复用的,没有做过这种立体形状的图表,打开echarts也没看到有相关的demo,看下如何实现 来看下UI设计师给到的设计图 上述设计图种柱状图都是立体的样

    2023年04月22日
    浏览(40)
  • 通过ajax异步交互实现echarts绘图

    目录 前言 1.引入库 2.flask链接MYSQL读取数据 3.HTML页面echarts绘图 4.结果实现 总结: ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。 ECharts 遵循 Apache-2.0 开源协议,免费商用。 ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等

    2023年04月14日
    浏览(57)
  • 【ECharts】从零实现echarts地图完整代码(纯前端,包含地图资源)

    这里忽略创建vue项目的操作过程,请自行搭建 vue2 项目 、 less 环境 安装下载 echarts 这里我们选择npm下载 安装成功后,在 main.js 中把echarts配置到this上 这里我建立了一个地图的组件,放在 hnMap 中 获取地图渲染json文件 这里我是通过下述的网址下载需要的地图 json 文件到本地

    2024年02月03日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包