echarts 图表数据更新方式

问题表现
页面 echarts 图表在做一些数据交互的时候会涉及到一些数据的更新。如果只是简单的新数据传递给echarts图表，许多时候我们会发现旧有的时候依然残留在页面之上
如下一示例
旧数据

series: [{
name: ‘A’,
type: ‘bar’,
data: [200, 300, 100, 330, 350],
},{
name: ‘B’,
type: ‘bar’,
data: [500, 100, 400, 300, 600],
}]
新数据

series: [{
name: ‘C’,
type: ‘bar’,
data: [200, 300, 100, 330, 350],
}]
如果不做处理，只是进行 chart.setOption(newData),那么旧有的数据 B 将依旧残留在页面之上

数据残留实例

问题产生原因
chart.setOption(option, {
notMerge: …,
lazyUpdate: …,
silent: …
})
setOption 中的 notMerge 即为不合并之意默认为 false，即合并。
我们在 setOption 的时候仅仅是传输了一些新的数据，其它的一些如图表的类型，基本样式，tooltip 等等均为再次设置，这个时候 notMerge 便起作用了，它将 echarts 一些原有的一些数据样式等与我们的 newData 一同合并进入 chart 实例当中，从而显现完整的 echarts 图表。
问题是，我们很希望只是一些样式进行了合并，而数据不需要了。这时候矛盾点产生了。

解决途径
弃用默认 merge，主动加载完整的 echarts 图表配置。
在我们每次进行 setOption 的时候，如此操作 demo.setOption(demoOption, true) 即可。
这样就需要每次传入完整的 echarts 图表设置，像是一些字体大小颜色等等等。我们关注的核心只应是数据层面，及其一些跟随数据变化的文字样式等。

解决数据重复拼写问题 $.extend(true, demoOption, newOption)
可以通过 jquery的深拷贝方法，将我们的数据及一些样式更改放在 newOption 当中，demoOption 中仅仅是一些 echarts 实例的一些基本配置。如此，

可以实现对数据及样式的集中管理
免去了数据合并造成旧数据残留的问题
基本配置如下

$(function () {
var echartOpt = {
fz: ‘15’,
color: ‘#fff’
};

var demo = echarts.init(document.getElementById('trade-history'));
function Initdemo(data, obj) {var demoOption = echarts 图表基本样式// 有时候 我们也需要将 数据 的样式 也一同提炼出来var seriesStyle =  [{itemStyle: {normal: {barBorderRadius: 10,borderColor: '#3fa7dc',color: 'red'}}},...{othersStyle}]                          var legend =  ['A', 'a']         // 新的图例数据var newOption = {legend: {data: legend},series: data                // 传入的数据}newOption.series.forEach(function (item, index) {$.extend(true, item, seriesStyle[index])    // 将数据样式 加载到我们的 新数据上面});$.extend(true, demoOption, newOption)  // 新旧数据合并demo.setOption(demoOption, true);
}
Initdemo();

})

echarts 图表数据更新方式相关推荐

动态更改echarts 高度_EasyShu地图可视化新突破，ECharts图表完美集成
EasyShu作为一款领军级Excel图表插件,在地图可视化这一领域,必须有所建树,一直在思考如何有所突破. 在一般性的以形状填色为代表的地图可视化,存在一些难以避免的小缺点,交互性存在较大的缺陷,就 ...
转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...
问题描述: echarts图表的toolbox里面本身有下载的功能,但有的时候,我们需要在echarts图表外添加一个按钮来实现下载,以下是基于vue,echarts版本4的一个解决方案记录: 解决方 ...
***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放
文章目录 echarts中设置x轴和y轴均随滚轮进行缩放当数据实时渲染时,也可进行区域缩放 echarts中设置x轴和y轴均随滚轮进行缩放 dataZoom 组件用于区域缩放,从而能自由关注细节的 ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
SpringBoot+LayUI+MybatisPlus+Echarts图表前后端分离实现数据统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...
vue+docxtemplater实现读取word文档，根据后端数据生成echarts图表插入word，并下载为docx格式文件
一.需求 word自带的图表不能满足需求,并且编写过程繁琐,需要写一个页面,主要功能是能读取服务器的word模板,根据后台给的数据,自动生成echarts图表并插入到word指定位置,然后点击能下载插 ...

echarts 图表数据更新方式

echarts 图表数据更新方式相关推荐

最新文章

热门文章