今天使用了一个Echarts来实现柱状图和直线图统计组合，每次通过axios(ajax库)来请求新数据来刷新数据，但是发现请求数据确实是对应变化到了options变量中，后台数据条数只有一条，但是图表数据没发生变化。

思考：

    一开始我傻乎乎地认为是vue的数据没响应，我就把options放到data选项中去，但是图表任然没发生变化，vue-devtool查看到对应的数据发生了变化。

解决原理以及方案：

    官方文档setOption方法签名如下：

    setOption(option, notMerge, lazUpdate)

    可以看到第二个参数，表示合并，这里表示是否option合并数据，默认值为false，这就是为什么数据源条数变化了，而图表数据条数缺没发生变化，正确姿势是setOption(options, true)

Echarts数据更新大坑的更多相关文章

  1. react之echarts数据更新

    react之echarts数据更新 在使用setState更新数据时,如果要将图标更新,需要做一些简单的封装,代码如下: import React, { Component } from 'react ...

  2. 微信小程序 Echarts 异步数据更新

    微信小程序 Echarts 异步数据更新的练习,被坑了很多次,特作记录. 作者:罗兵 地址:https://www.cnblogs.com/hhh5460/p/9989805.html 0.效果图   ...

  3. 关于echarts绘制树图形的注意事项(文字倾斜、数据更新、缓存重绘问题等)

    最近项目中使用到echarts的树操作,对其中几点注意事项进行下总结. 效果图: 1.基础配置 options的配置如下: { tooltip: { trigger: 'item', triggerO ...

  4. echarts基本使用

    基本操作: 1,准备好需要渲染chart图的div层 <div id="org-data-percent" class="org-data-percent" ...

  5. Echarts后台封装option对象

    该方法返回的keyword指向了前台负责图表显示的jsp页面 public String keyword() { if(this.dateNum == null || this.dateNum.equ ...

  6. ECharts教程

    ECharts 特性 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) 底层依赖轻量级的矢量图形库 ZRender 丰富的可视化类型 常规的折线图.柱状图 ...

  7. ReactJS实用技巧（2）：从新人大坑——表单组件来看State

    不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...

  8. angular6 ngx-echarts 图表数据更新

    最近在用angular写一个echarts图表,初始化赋值数据可以展示,但是重新获取数据以后,图表不会刷新. 后来发现了问题点所在, <div echarts class="demo- ...

  9. 基于 ECharts 封装甘特图并实现自动滚屏

    项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...

随机推荐

  1. 运维开发实践——基于Sentry搭建错误日志监控系统

    错误日志监控也可称为业务逻辑监控, 旨在对业务系统运行过程中产生的错误日志进行收集归纳和监控告警.似乎有那么点曾相识?没错... 就是提到的“APM应用性能监控”.但它又与APM不同,APM系统主要注 ...

  2. python--unittest测试框架

    unittest中最核心的四个概念是:test case, test suite, test runner, test fixture

  3. Go语言-1-标识符与变量

    目录 1. Go标识符 1.1 Go关键字 1.2 常量标识符(4个) 1.3 空白标识符(1个) 1.4 内置数据类型标识符 1.5 内置函数(15个) 2. Go语言操作符 3. Go语言变量 3 ...

  4. Python数据分析Pandas的编程经验总结

    Pandas的api 参考手册DataFrame部分:https://pandas.pydata.org/pandas-docs/stable/reference/frame.html 数据处理部分: ...

  5. c#语法复习总结（2）-数据类型

    C#数据类型可以分值类型和引用类型.值类型,先说说一个概念 c#栈和堆. 一,栈和堆. 堆:在c里面叫堆,在c#里面其实叫托管堆.为什么叫托管堆,我们往下看. 栈:就是堆栈,因为和堆一起叫着别扭,就简 ...

  6. ASP.NET Core中使用MialKit实现邮件发送

    # 导包 首先我们需要导入 MailKit NuGet包,NuGet安装包命令在下方拓展介绍中. # 引用命名空间 using MailKit.Net.Smtp; using MimeKit; # 邮 ...

  7. 开发技术-IPython介绍

    开发技术-IPython介绍 IPython是交互式的Python命令行,希望大家喜欢. 最近在回顾之前学习的内容,并且继续学习新的知识.这种自身的感觉,很不一般,有太多的感想产生.希望自己可以坚持将 ...

  8. Centos下安装LoadRunner负载机

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAd0AAADfCAIAAAA84J6GAAAgAElEQVR4nJzb93cbR6In+uK/8v6Fd8

  9. Node.js自动本地重启服务器

    node.js在本地项目中,更新 了代码 是不会自动刷新 的,要重启才能生效,每次更改代码又手动重启这样很麻烦. 可以安装 个supervisor.全局安装supervisor npm install ...

  10. js中的原型,原型链和继承

    在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript最 ...