echarts图表点击按钮切换不同的主题

272 阅读1分钟

多种风格的主题可以借助echarts.apache.org/zh/theme-bu… 实现

具体实现步骤

image.png

我们使用的是js

image.png

  1. 下载或复制主题保存至 *.js 文件;
  2. 将该文件在 HTML 中引用;

image.png

  1. 使用 echarts.init(dom, 'customed') 创建图表,第二个参数即为 *.js 文件中注册的主题名字。

我正在尝试编译的应用程序没有使用外部 jquery 及其关联的 JS 文件进行编译。当我尝试在 ReactJS 应用程序中将这些文件链接到我的 HTML 页面时,它会抛出错误。

错误如下:

image.png

如果想要解决的话: 完全禁用这个 ESLint 规则。为此,您只需在文件顶部添加以下内容:

/* eslint no-undef: "off"*/

然后定义四个按钮

image.png

定义主题的状态

image.png

在useEffect中监听这个主题

image.png

最后完成处理函数

image.png

这就实现了一个切换主题的效果