React中使用Echarts无法显示title、tooltip等组件的解决方案
更新时间：2024年03月14日 14:51:44 作者：tygkking
这篇文章主要介绍了React中使用Echarts无法显示title、tooltip等组件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
背景
近期在写React的前端时遇到了使用Echarts只有图表没有其他组件的情况
在询问大佬之后找到了解决方法
遇到问题
引用Echarts除了能够显示图表以外无法显示其他组件，整个图比较死板。
我的错误
没有注意最开始的引用，看着其他博客写的使用了按需引入，显示图表之后没有注意还引用了相关组件
例如tooltip，title，legend。
所以导致了即使在option中写了使用tooltip等组件的代码，但最终的结果还是只有图表的显示，没有相关组件。
解决方法
注意最开始的引用
对于Echarts有两种引用方式，
第一种是按需引入
代码如下：
首先引入基本的echarts组件
import echarts from 'echarts/lib/echarts'
如果要使用折线图和柱状图，还需要引入相关组件
import 'echarts/lib/chart/bar' import 'echarts/lib/chart/line'
使用title、tooltip、legend等组件，还需要引入相关组件
import 'echarts/lib/component/title' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' import 'echarts/lib/component/toolbox'
这样写起来虽然麻烦一些，但是在最后导出的时候，占用的空间要小一些，所以一般会采用这样的方式。
第二种是采用全部引入的方式
直接全部将echarts全部引入
import echarts from 'echarts'
这样的话，之后无论是想要使用折线图、柱状图，还是使用tooltip、toolbox等组件，直接使用就好，不需要再次引用。
按照上述的方式二选其一，得到的图表就较为生动了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持程序员之家。
相关文章
这篇文章主要介绍了react-router6.x路由配置及导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了react项目中使用插件配置路由的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03
react hooks使用Echarts图表中遇到的情况及相关配置问题
这篇文章主要介绍了react hooks使用Echarts图表中遇到的情况及相关配置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了react 不用插件实现数字滚动的效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了TypeScript在React项目中的使用总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要为大家介绍了React并发更新与性能优化解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
详解如何使用React和MUI创建多选Checkbox树组件
这篇文章主要为大家详细介绍了如何使用 React 和 MUI（Material-UI）库来创建一个多选 Checkbox 树组件,该组件可以用于展示树形结构的数据,并允许用户选择多个节点,感兴趣的可以了解下2024-01-01
这篇文章主要介绍了React中state属性和生命周期的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
本文主要介绍了react 项目中引入图片，本文详细的介绍了几种方法，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
本文将介绍在React?Native开发中常见的性能优化问题和解决方案,包括ScrollView内无法滑动、热更新导致的文件引用问题、高度获取、强制横屏UI适配、低版本RN适配iOS14、缓存清理、navigation参数取值等,感兴趣的朋友一起看看吧2024-01-01
最新评论