今天使用了一个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. linux安装go环境并编写第一个go程序

    1.从官网下载go源码包 wget https://dl.google.com/go/go1.12.5.linux-amd64.tar.gz 2.在/usr/local下解压源码包 sudo tar ...

  2. vCenter6.7的简单安装与使用

    1.VMware的vCenter已经有了很大的改进,安装过程极为简单方便. 2. 下载vCenter的安装包即可. 我这边下载的ISO为: VMware-VIM-all--.iso 网上有资源,通过百 ...

  3. mysql中的回表查询与索引覆盖

    了解一下MySQL中的回表查询与索引覆盖. 回表查询 要说回表查询,先要从InnoDB的索引实现说起.InnoDB有两大类索引,一类是聚集索引(Clustered Index),一类是普通索引(Sec ...

  4. 02、策略模式(Strategy)

    一.概念: 策略是为达到某一目的而采取的手段或方法,策略模式的本质是目标与手段的分离, 手段不同而最终达成的目标一致.客户只关心目标而不在意具体的实现方法, 实现方法要根据具体的环境因素而变化. 二. ...

  5. 图解微信小程序---获取电影列表

    图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console  Log的方式获取我们电影的相关数据字段,后 ...

  6. CSS加载会阻塞页面显示？

    可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下. 原理解析 那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下. ...

  7. layui的使用说明

    一.定义 layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,跟其他UI框架比较(比如bootstrap.easyui.findui.topu ...

  8. 判读是不是对象字面量(纯对象)。对象字面量创建方式有{}、new Object()创建

    //判读是否是自身属性 function isHasPro(obj,pro){ return obj.hasOwnProperty(pro) ? true : false; } //判读是不是对象字面 ...

  9. Vue.js最佳实践--给大量子孙组件传值(provide/inject)

    开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...

  10. web攻击日志分析之新手指

    0x00 前言 现实中可能会经常出现web日志当中出现一些被攻击的迹象,比如针对你的一个站点的URL进行SQL注入测试等等,这时候需要你从日志当中分析到底是个什么情况,如果非常严重的话,可能需要调查取 ...