React中使用Echarts无法显示title、tooltip等组件的解决方案
更新时间：2024年03月14日 14:51:44 作者：tygkking
这篇文章主要介绍了React中使用Echarts无法显示title、tooltip等组件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
背景
近期在写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的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
这篇文章主要介绍了详解react组件通讯方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了React高德地图进京证路线规划问题小记,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
这篇文章主要介绍了React class 的组件库与函数组件适配集成方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-05-05
React Native基础入门之初步使用Flexbox布局
React中引入了flexbox概念，flexbox是属于web前端领域CSS的一种布局方案，下面这篇文章主要给大家介绍了关于React Native基础入门之初步使用Flexbox布局的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了react中定义变量并使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家介绍了React的特征单向数据流学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React如何使用sortablejs实现拖拽排序问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
connect()是React-redux中的核心方法之一，它将react组件预redux中的Store真正连接在一起，下面这篇文章主要给大家介绍了react-redux中connect()方法的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要为大家介绍了React虚拟渲染实现50个或者100个图表渲染的实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
最新评论