今天使用了一个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. CMake的含义和用法解读

    什么是 CMake 你或许听过好几种 Make 工具,例如 GNU Make ,QT 的 qmake ,微软的 MS nmake,BSD Make(pmake),Makepp,等等.这些 Make 工 ...

  2. java报错 pom.xml第一行报"org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project...

    https://www.cnblogs.com/appium/p/11168441.html 新建Maven项目时,每个pom文件第一行都报错. 一.问题分析 原因就是你的maven的配置文件不是最新 ...

  3. WPF 精修篇 属性动画

    原文:WPF 精修篇 属性动画 属性动画 是通过 Storyboard 来改变属性值 <Rectangle x:Name="rect" Width="200&quo ...

  4. Sql 分页语句

    select * from (select *,ROW_NUMBER()over(order by [ID]) as rowindex from product ) tb  where rowinde ...

  5. .net 将base64转为图片

    1.base64的格式为: data:image/jpeg;base64,sandkansncquiueui3jk 2.ajax传输会把+转为空格 3.后台处理的代码: string imgPath ...

  6. 代码语法高亮踩坑-原理，问题, PRE元素及htmlentity

    语法高亮库基础原理 在研究使用能够在web页面上代码语法高显的解决方案时,发现有很多现成的开源库.比较中意的有prism.js,highlightjs.他们的原理基本上核心就两点: 1. 利用html ...

  7. vue中路由在新的标签页打开

    如下 let routeData = this.$router.resolve({ name: 'commercialPreview', query: {cylType: this.$route.qu ...

  8. 修改Nginx配置参数解决http状态码：413上传文件大小限制问题

    修改Nginx上传文件大小限制 我们使用ngnix做web server的时候,nginx对上传文件的大小有限制,默认是1M. 当超过大小的时候会报413(too large)错误.这个时候我们要修改 ...

  9. Mybatis映射文件标签（关于sql）

    Mybatis映射文件 1.接口的全限定名和映射文件的namespace一致 <mapper namespace="com.offcn.dao.UserDao"> 2. ...

  10. vue开发环境配置

    一.开发工具 Visual Studio Code 二.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nod ...