今天使用了一个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. Thread.currentThread().setContextClassLoader为什么不生效与java.lang.NoClassDefFoundError之Java类加载的Parent first Classloader

    众所周知,Java的类加载机制采用了双亲委派模型,导致在进行类加载的时候会有多个加载器,这种复杂的机制,有时候会导致‘Exception in thread main java.lang.NoClas ...

  2. Prometheus Grafana可视化展示Linux资源使用率

    Prometheus Grafana可视化展示Linux资源使用率  Grfana官方仪表盘下载:https://grafana.com/dashboards 数据源推荐:https://grafan ...

  3. 获取Url地址中参数的3种方法【华为云技术分享】

    获取Url的代码如下:window.location.href; 方法一:原生js(假设已经获得了Url地址) var url = 'https://gitbook.cn/gitchat/geekbo ...

  4. DOM的回流和重绘（重排、重绘）

    什么是DOM回流? 页面渲染时,我们对HTML结构简单的增删查改时,浏览器会对所有的dom进行重新排序,这就i是DOM回流,严重影响浏览器性能 DOM的回流和重绘: **DOM的回流**:当页面中元素 ...

  5. excel中快捷计算单一列中的所有的值

    excel中快捷计算单一列中的所有的值 比如B列中所有的值 =SUM(B1:B100) 计算B列第一行到第100行的值 又学了一招  如果想统计B列所有的值 可以用 =SUM(B:B)

  6. HTML5新标签和CSS伪类

    HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端 <nav> <footer> <section> <header&g ...

  7. excel批量添加超链接

    使用 Hyperlink(Link-location,Friendly-name)

  8. .net core 加载项目提示项目文件不完整,dotnet提示不是内部或外部命令

    记录一下 在系统环境变量中PATH添加如下: C:\Windows;C:\Windows\System32\System32\Wbem;C:\Windows\System32;

  9. vue中通过WeixinJSBridge关闭微信公众号当前页面，返回微信公众号首页

    之前有个需求,点击菜单进入到微信公众号模块,然后点击返回的时候不知道到哪里去,后来觉得点返回的时候直接关闭页面,但是window.close()并不能关闭页面,然后经过查找资料,发现通过以下方法可以 ...

  10. ASP.NET Core使用Quartz定时调度

    在应用程序开发过程中,经常会需要定时任务调度功能,本篇博客介绍Asp.net Core如何使用Quartz完成定时调度 一.Quartz使用步骤 创建调度器scheduler,并开启 创建Job作业 ...