Echarts主题编辑器的使用

最新推荐文章于 2025-06-04 11:06:00 发布

Reality_Dream7

最新推荐文章于 2025-06-04 11:06:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/Reality_Dream7/article/details/127922879

本文介绍了如何在ECharts中使用内置的'dark'主题及自定义主题的方法。通过主题编辑器创建个性化主题，并通过简单的步骤在项目中实现全局应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在echarts中最简单的更改全局样式的方式，是直接采用颜色主题，ECharts5 除了一贯的默认主题外，还内置了'dark'主题：

var myChart = this.$echarts.init(chartDom, 'dark')

其他的主题，没有内置在 ECharts 中，需要自己加载，这些主题可以在主题编辑器中访问到，编辑好以后自己使用，使用方法很简单。

1.在主题编辑器中复制json立面的内容：

2.然后新建一个 .js 文件，文件内容：

const theme = 复制的内容

3.在main.js中引入并注册使用，这样就可以在全局使用了：

import * as echarts from 'echarts'
import theme from "./echarts/mytheme";

echarts.registerTheme("mytheme", theme);
Vue.prototype.$echarts = echarts

4.使用：

var myChart = this.$echarts.init(chartDom, 'mytheme') // 名字和注册名字一样

完成！！！