vue2和vue3中echarts主题的引入

echarts官网主题自定义配置

配置好自己的主题后，下载主题，可以下载js和json格式的。

---

比如下载js文件，新建一个theme.js文件，保存刚才下载的主题配置。

• 引入theme.js：

 <script src="theme.js"></script>

• 在echarts.init第二个参数写入theme

var myChart = echarts.init(document.getElementById('container'), 'theme');

---

1、Vue2中使用

• 引入theme.js:是在public文件夹下的index.html下写的这行代码，theme.js放在public/static/theme.js

 <script src="static/theme.js"></script>

• 在echarts.init第二个参数写入theme

<div class="container" ref="container_ref"></div>

 const echarts = this.$echarts.init(this.$refs.container_ref ,'theme');

9.24更新啊……

2、 vue3中使用

• 刚开始按照vue2中的方式引入，会报ECharts is not Loaded错……
• 一番百度下来看到了：github上这个解决办法
• 其它说引入json格式的，还有修改root.echarts的，试了下也不行……

1. 引入echarts中的主题js文件，只有部分主题，如果你想配置自己的，就在官方配置好js文件放到echarts/theme/你的主题文件.js中

比如我引入自己配置的chalk.js主题

2. 引入

import * as echarts from 'echarts';
require('echarts/theme/chalk');

3. 使用

 chartInstance = echarts.init(document.getElementById("main"),'chalk');