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自定义hooks同步获取useState的最新状态值方式
这篇文章主要介绍了React自定义hooks同步获取useState的最新状态值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
解决配置setupProxy.js代理,页面报错404问题
这篇文章主要介绍了解决配置setupProxy.js代理,页面报错404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
React Native 脚手架的基本使用详解
这篇文章主要介绍了React Native 脚手架的基本使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
React中的ref属性的使用示例详解
React 提供了 refrefref 属性，让我们可以引用组件的实例或者原生 DOM 元素,使用 refrefref，可以在父组件中调用子组件暴露出来的方法，或者调用原生 element 的 API,这篇文章主要介绍了React中的ref属性的使用,需要的朋友可以参考下
2023-04-04
ES6下React组件的写法示例代码
这篇文章主要给大家介绍了在ES6下React组件的写法，其中包括定义React组件、声明prop类型与默认prop、设置初始state、自动绑定，文中分别给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05
react 实现图片正在加载中加载完成加载失败三个阶段的原理解析
这篇文章主要介绍了react 实现图片正在加载中加载完成加载失败三个阶段的,通过使用loading的图片来占位，具体原理解析及实现代码跟随小编一起通过本文学习吧
2021-05-05
React获取Java后台文件流并下载Excel文件流程解析
这篇文章主要介绍了React获取Java后台文件流下载Excel文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
React中props使用教程
props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用
2022-09-09
React渲染的优化方案
react的渲染机制是非常独特的,有别于 Vue 框架的渲染次数的优化计算,React 很久以来就有PureComponent、shouldUpdate,本文小编给大家介绍了React渲染的优化方案,需要的朋友可以参考下
2024-08-08
useEffect中return函数的作用和执行时机解读
这篇文章主要介绍了useEffect中return函数的作用和执行时机,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01