ReactEcharts遇到的坑(ReactEcharts相关属性)

最新推荐文章于 2024-05-04 19:47:39 发布
最新推荐文章于 2024-05-04 19:47:39 发布
阅读量1.7k 收藏 5
点赞数 6
分类专栏： React Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44064730/article/details/105790807
版权

ReactEcharts组件会默认将原渲染图表的数据和二次渲染图表的数据默认合并，
即在图表某些变量改变时二次渲染echarts图表，如果本次渲染少了之前的参数，会一并把之前参数的数值合并到图表
在这里插入图片描述
（举个栗子：此图表中，当切换筛选条件后，筛选后的选项不存在“Other”的数值，但还是会把第一次遗留的“Other”数值合并上去，只有当新图表和旧图表都用相同参数，才会替换，否则就是合并）

解决方案：发现<ReactEcharts />组件不仅具有option和style的属性，

还有notMerge和LazyUpdate属性————

notMerge————可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并
LazyUpdate————可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新

在这里我给<ReactEcharts />组件中加入notMerge={true}即可实现图表每次更新不再合并之前数据

浦东余春娇
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
echarts series参数_【React】react项目引入echarts插件
weixin_39955953的博客
01-18 448
参考npm文档：[echarts-for-react](echarts-for-react)由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装第一步：npm安装echarts-for-react npm install --save echarts-for-react npm install echarts --save //如果有报错找不到echarts模块，需要在安...
记--react中echarts初探，踩坑
weixin_34354945的博客
03-19 719
因项目需要，开启了echarts之路。。。 官方配置是这样的，基础的撸法这里都有，想玩点花样，就得自己啃文档&脑洞大开。 官方API这个API，个人觉得不是那么容易让人一看就会用。。。(OS：可能因为我智商不够) 在react中使用，开始还以为需要某一个特殊的npm包，但是公司大神曰：“正常用就行。”遂，简单粗暴开撸。 首先 npm install echarts 其次 在代码里引入 i...
网络安全最新如何在React项目中使用ECharts图表库_echarts react
最新发布
2401_84253037的博客
05-04 963
1.创建一个React组件，并且需要组件内的状态state，render函数，componentDidMount钩子2.render函数渲染需要容纳Echart实例的容器元素,并需要声明id，方便Echarts实例找到挂载的目标3.设置组件内的状态state，定义sourceData存放Echarts实例的数据源3.componentDidMount钩子，当render函数渲染完容器元素之后调用，主要作用如下:1）生成坐标数据源，并更新到state中的sourceData上。
＜ReactEcharts/＞组件属性参数记录
weixin_55763825的博客
09-05 825
echarts-for-react的组件属性参数介绍
React中的ECharts
hello_helloworld的博客
08-31 2060
react中的echarts-实时渲染-echarts-for-react，介绍了如何使用ECharts图表库，如何使用ECharts的react封装库，如何在实践中使用ECharts，如何结合定时器与ECharts制造出动态效果
React中使用Echarts
duansamve的博客
02-02 611
首先安装echarts和echarts-for-react，版本一定要对，package.json： "dependencies": { "echarts": "^4.9.0", "echarts-for-react": "^2.0.16", } 完整代码如下： import React, { Component } from 'react' import { Card } from 'antd'; import ReactEcharts from 'echarts-for-r
在React 组件中使用Echarts的示例代码
11-30
在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化，第一反应当然是Echarts了。平时用js加载Echarts组件很方便，但是在React中就要费下神了。各种连蒙带猜实现了。edmo里的 这里我们要在自己搭建的...
react-echarts:这是ECharts的React版本
05-07
React艺术==================这是什么react-echarts是使用react的ECharts版本。ECharts是一个非常好的工具，我们想提供react版本来帮助使用React开发和发布项目。...npm安装astwyg / yuidoc -g 在根目录中执行命令：...
react-echarts
10-15
基于UMI+echarts构建的基础项目
ECharts在React+Antd用法及常见错误
01-08
最近项目中开始使用ECharts做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。由于初次使用，很多代码优化空间很大，希望大家能帮我提出，感恩～ 最终效果 1、实现点击折线图上...
react-Echarts的React封装各种配置项可以写成子组件的形式
08-15
Echarts 的 React 封装，各种配置项可以写成子组件的形式
react native中使用echarts
cnmeimei的博客
10-12 1759
开发平台：mac pro node版本：v8.11.2 npm版本：6.4.1 react-native版本：0.57.8 native-echarts版本：^0.5.0 目标平台：android端收银机，android7.0+ 最近在使用react native进行app的开发工作，rn开发的内容会与原生app混合，在一些使用场景下遇到了一些问题 使用场景：每日收益与每月收益的折线图统计 在pc/h5端的开发工作中，图标类的开发使用echarts/f2等三方工具都是比较常见的了，在r...
ReactEcharts常见基础配置项解析
weixin_44542404的博客
04-15 461
【代码】ReactEcharts基础配置项及常见图表实现。
react-echarts使用总结
weixin_34387468的博客
03-14 534
安装echarts-for-react 安装下面两个包 npm install echarts-for-react -S npm install echarts -S 引入echarts - import ReactEcharts from 'echarts-for-react'; - import echarts from 'echarts' 复制代码 引入图表dom <ReactE...
echarts+react17 实现联动的时间统计图表
wsgodlike的博客
11-06 125
说明：这里使用uniqBy方法对taskId这个字段进行去重，去重后taskId字段显示唯一。2.filter对数据集筛选，实现图表的联动效果。4.选择框、echarts图表接收并处理数据集。3.封装方法，方便后续修改。
Echarts-for-react的使用
weixin_30725467的博客
02-13 2621
示例 一、安装 npm install --save echarts-for-react //如果需要使用echarts的一些特殊方法需要安装 npm install --save echarts 二、使用 import ReactEcharts from 'echarts-for-react'; import echarts fr...
echarts-for-react中数据发生变化，如何让图表实时更新
qq_38918953的博客
09-22 5807
需求：点击按钮，图表的数据改变 // 1.用ref得到dom，ref不用引入 return ( <ReactEcharts ref={(e) => { this.echartsElement = e }} option={this.getChartOption()} style={{ height: '500px' }} onEvents={onEvents} notMerge={true} /> </div
echarts for react改变主题颜色
JeffanChen的博客
08-27 1349
先赞后看！养成习惯！ import React from 'react'; import ReactEcharts from 'echarts-for-react'; // or var ReactEcharts = require('echarts-for-react'); <ReactEcharts option={this.getOption()} notMerge={true} lazyUpdate={true} theme={"theme_name"} //可以在这里
React Native图表插件react-native-charts-wrapper集成教程
zhangyanlf的博客
05-23 5738
最近公司项目要用到图标显示，在网上找了好多天找到react-native-charts-wrapper，这款第三方图形很全，功能也很强大，就和大家一起分享下使用心得:(iOS端)，好了，话不多说，接下来开始一步一步集成图表插件react-native-charts-wrapper： react-native-charts-wrapper GitHub地址1.新建一个项目出现下面界面时，说明项目
ReactEcharts更新option
04-05
要更新ReactEcharts的option，需要在组件中使用state来保存option。然后，在需要更新option的时候，使用setState来更新state中的option。ReactEcharts会自动将更新后的option渲染到图表中。 以下是一个示例代码： ```jsx import React, { useState } from 'react'; import ReactEcharts from 'echarts-for-react'; function MyChart() { const [option, setOption] = useState({ // 初始option xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }); function handleClick() { // 更新option setOption({ xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] }, yAxis: { type: 'value' }, series: [{ data: [100, 200, 300, 400, 500, 600, 700], type: 'line' }] }); } return ( <div> <ReactEcharts option={option} /> <button onClick={handleClick}>更新</button> </div> ); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值