解决echarts echarts数据动态更新和dataZoom被重置问题


Posted in Javascript onJuly 20, 2020

1.全局绑定滚轮事件,获得dataZoom最新的位置:

myChart.on('dataZoom',function(event){
   if(event.batch){
   start=event.batch[0].start;
   end=event.batch[0].end;
   }else{
   start=event.start;
   end=event.end;
   };
});

2.把最新的start和end赋值给要更新的option

window.setInterval(function () {
  num=Math.random()*num+100;
 data0.splice(0,1);
 data0.push(num);
 
 option.dataZoom[0].start=start;
 option.dataZoom[0].end=end;
 myChart.setOption(option);  
},3000);

3.echart数据增量刷新还可以用appendData

补充知识:echarts动态添加数据

我就废话不多说了,大家还是直接看代码吧~

<template>
  <!--为echarts准备一个具备大小的容器dom-->
 	<div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
  import echarts from 'echarts'
 
  export default {
    name: 'Chart',
    data () {
      return {
        charts: '',
      }
    },
    methods:{
      initLine(id){
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          title: {
            text: '动态数据 + 时间坐标轴'
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              params = params[0]
              return params.value[0] + ' : ' + params.value[1]
            },
            axisPointer: {
              animation: false
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: false
            }
          },
          animation: false
        })
       }
    },
    mounted(){
      this.$nextTick(function() {
        this.initLine('main')
        this.charts.setOption({
          series : [
            {
              name : '模拟数据0',
              type : 'line',
              showSymbol : false,
              hoverAnimation : false,
              data : [['2018-01-02', '3'],['2018-01-05', '4']]
            }
          ]
        })
        
        setTimeout(() => {
          this.charts.appendData({
            seriesIndex:0,
            data : [['2018-01-03', '1'],['2018-01-07', '2']]
          })
        },2000)
        
        setTimeout(() => {
          this.charts.resize();  
        },4000)
 
        setTimeout(() => {
          this.charts.setOption({
            series : [
              {},
              {
                name : '模拟数据1',
                type : 'line',
                showSymbol : false,
                hoverAnimation : false,
                data : [['2018-01-02', '5'],['2018-01-05', '10']]
              }
            ]
          })
          this.charts.appendData({
            seriesIndex:1,
            data : [['2018-01-03', '11'],['2018-01-10', '2']]
          })
        },6000) 
        setTimeout(() => {
          this.charts.resize();  
        },8000)
      })
    }
  }
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
</style>

补充

主动使用echarts的resize方法改变图表大小:

(opts?: {
  width?: number|string,
  height?: number|string,
  silent?: boolean
})

当在参数中填入宽高,this.echarts.resize({width:300}),dom层必须有一个初始化像素的宽高,百分比的宽高该方法不会生效。

以上这篇解决echarts echarts数据动态更新和dataZoom被重置问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
js显示文本框提示文字的方法
May 07 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 #Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 #Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 #Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 #Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 #Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 #Javascript
解决vue项目router切换太慢问题
Jul 19 #Javascript
You might like
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python字典快速保存于读取的方法
2018/03/23 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
安全教育心得体会
2013/12/29 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
车间主任岗位职责
2014/03/16 职场文书
承诺书的格式范文
2014/03/28 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
个人道歉信大全
2019/04/11 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server