Vue Echarts主题切换

Echarts官方支持自定义主题样式。本文记录一下Vue项目中进行Echarts主题样式切换的过程。

主题样式文件下载

首先在Echarts官网的主题构建工具页面中提供给几个默认的主题,提供了JS版本/JSON版本。就拿vintage举例,这里我选择下载JS版本的文件。

Vue中使用

修改下载下来的文件vintage.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
+ import * as echarts from 'echarts'       
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
+ factory({}, echarts);
- factory({}, root.echarts);
}
}(this, function (exports, echarts) {

修改后的文件放在src/assets/js/theme目录下。

main.js中引入:

1
import '@/assets/js/theme/vintage.js'

然后我们就可以在组件中引用:

1
let myChart = echarts.init(document.getElementById("myChart"), 'vintage');

注意:init的第二个参数不是主题js的文件名,而是文件里注册的主题名:

1
2
3
4
5
6
7
8
9
10
11
12
13
echarts.registerTheme('vintage', {
"color": [
"#d87c7c",
"#919e8b",
"#d7ab82",
"#6e7074",
"#61a0a8",
"#efa18d",
"#787464",
"#cc7e63",
"#724e58",
"#4b565b"
],

----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道