解决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 相关文章推荐
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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
form自动提交实例讲解
2017/07/10 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python读写文件方法总结
2015/06/09 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
公司离职证明范本
2014/01/13 职场文书
商业活动邀请函
2014/02/04 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
开学典礼策划方案
2014/05/28 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Python图片验证码降噪和8邻域降噪
2021/08/30 Python