通过实现主题选择面板，更方便的对echarts图表进行主题的切换，并且支持饼状图、折线图、柱状图等多类型echarts图表。
目录
1、实现过程
1.1、导入echarts主题JS文件
1.2、添加选择按钮图片
1.3、添加按钮
1.4、主题选择面板实现
1.5、初始化echarts图
1.6、添加选择事件
2、实现效果
3、实现代码
4、面板所需图片文件
1、实现过程
1.1、导入echarts主题JS文件
实现echarts主题切换需要导入echarts模块的主题JS文件，文件位于echarts/theme/目录下。
import * as echarts from "echarts";
import 'echarts/theme/azul.js'
import 'echarts/theme/bee-inspired.js'
import 'echarts/theme/blue.js'
import 'echarts/theme/caravan.js'
import 'echarts/theme/carp.js'
import 'echarts/theme/cool.js'
import 'echarts/theme/dark.js'
import 'echarts/theme/dark-blue.js'
import 'echarts/theme/dark-bold.js'
import 'echarts/theme/dark-digerati.js'
import 'echarts/theme/dark-fresh-cut.js'
import 'echarts/theme/dark-mushroom.js'
import 'echarts/theme/eduardo.js'
import 'echarts/theme/forest.js'
import 'echarts/theme/fresh-cut.js'
import 'echarts/theme/fruit.js'
import 'echarts/theme/gray.js'
import 'echarts/theme/green.js'
import 'echarts/theme/helianthus.js'
import 'echarts/theme/infographic.js'
import 'echarts/theme/inspired.js'
import 'echarts/theme/jazz.js'
import 'echarts/theme/london.js'
import 'echarts/theme/macarons.js'
import 'echarts/theme/macarons2.js'
import 'echarts/theme/mint.js'
import 'echarts/theme/red.js'
import 'echarts/theme/red-velvet.js'
import 'echarts/theme/roma.js'
import 'echarts/theme/royal.js'
import 'echarts/theme/sakura.js'
import 'echarts/theme/shine.js'
import 'echarts/theme/tech-blue.js'
import 'echarts/theme/vintage.js'1.2、添加选择按钮图片
图片文件已放到文章末尾，下载之后，将文件夹添加到/src/assets/目录下即可，
与代码相对应
:src="require(`@/assets/right_angle_picture/`+btn+`.png`)"1.3、添加按钮
添加按钮控制面板显示，点击按钮将弹出主题选择面板
<el-button type="info" plain @click="dialogVisible = true">切换主题</el-button>1.4、主题选择面板实现
使用el-dialog 显示面板，添加el-scrollbar 滚动条展示选择按钮，v-for循环添加按钮和图片
<el-dialogtitle="Echarts主题选择":visible.sync="dialogVisible"width="500px"class="class_dialog_hospital"center><div class="cab"><el-scrollbar style="height: 100%"><el-row align="middle"v-for="(btnArr, index) in oprBtn":key="index"><el-col :span="12"style="padding-top:5px;padding-bottom:5px"v-for="(btn, index) in btnArr":key="index"><div><div><el-button plain round @click="handleToggle(btn)"><img style="width: 151px; height: 19px":src="require(`@/assets/right_angle_picture/`+btn+`.png`)" alt=""/></el-button></div></div></el-col></el-row></el-scrollbar></div></el-dialog>1.5、初始化echarts图
指定主题名。在ECharts对象初始化时，通过init的第2个参数指定需要引入的主题名。如statisticsChart = echarts.init(this.$refs.statisticsChart, 主题名); 。
mounted() {statisticsChart = echarts.init(this.$refs.statisticsChart, 'light',{renderer:'svg'}); //svg格式显示图表statisticsChart.setOption(this.options);},1.6、添加选择事件
点击主题选择按钮之后，将主题名称传入方法中，改变主题先将echarts头像销毁，并重新构建echarts,点击之后隐藏主题选择面板，这里构建echarts时选择SVG 渲染器，
handleToggle(theme) {statisticsChart.dispose(); //销毁echartsstatisticsChart = echarts.init(this.$refs.statisticsChart, theme,{renderer:'svg'}); //svg格式显示图表statisticsChart.setOption(this.options);this.dialogVisible = false;},2、实现效果
3、实现代码
<template><div class="app-container"><el-button type="info" plain @click="dialogVisible = true">切换主题</el-button><div ref="statisticsChart" class="statistics"></div><el-dialogtitle="Echarts主题选择":visible.sync="dialogVisible"width="500px"class="class_dialog_hospital"center><div class="cab"><el-scrollbar style="height: 100%"><el-row align="middle"v-for="(btnArr, index) in oprBtn":key="index"><el-col :span="12"style="padding-top:5px;padding-bottom:5px"v-for="(btn, index) in btnArr":key="index"><div><div><el-button plain round @click="handleToggle(btn)"><img style="width: 151px; height: 19px":src="require(`@/assets/right_angle_picture/`+btn+`.png`)" alt=""/></el-button></div></div></el-col></el-row></el-scrollbar></div></el-dialog></div>
</template><script>import * as echarts from "echarts";import 'echarts/theme/azul.js'
import 'echarts/theme/bee-inspired.js'
import 'echarts/theme/blue.js'
import 'echarts/theme/caravan.js'
import 'echarts/theme/carp.js'
import 'echarts/theme/cool.js'
import 'echarts/theme/dark.js'
import 'echarts/theme/dark-blue.js'
import 'echarts/theme/dark-bold.js'
import 'echarts/theme/dark-digerati.js'
import 'echarts/theme/dark-fresh-cut.js'
import 'echarts/theme/dark-mushroom.js'
import 'echarts/theme/eduardo.js'
import 'echarts/theme/forest.js'
import 'echarts/theme/fresh-cut.js'
import 'echarts/theme/fruit.js'
import 'echarts/theme/gray.js'
import 'echarts/theme/green.js'
import 'echarts/theme/helianthus.js'
import 'echarts/theme/infographic.js'
import 'echarts/theme/inspired.js'
import 'echarts/theme/jazz.js'
import 'echarts/theme/london.js'
import 'echarts/theme/macarons.js'
import 'echarts/theme/macarons2.js'
import 'echarts/theme/mint.js'
import 'echarts/theme/red.js'
import 'echarts/theme/red-velvet.js'
import 'echarts/theme/roma.js'
import 'echarts/theme/royal.js'
import 'echarts/theme/sakura.js'
import 'echarts/theme/shine.js'
import 'echarts/theme/tech-blue.js'
import 'echarts/theme/vintage.js'let statisticsChart = null;
export default {name: "index",data() {return {//主题选择面板显示标识dialogVisible: false,}},mounted() {statisticsChart = echarts.init(this.$refs.statisticsChart, 'light',{renderer:'svg'}); //svg格式显示图表statisticsChart.setOption(this.options);},computed: {options() {return {legend: {},tooltip: {},dataset: {source: [['product', '2015', '2016', '2017'],['Matcha Latte', 43.3, 85.8, 93.7],['Milk Tea', 83.1, 73.4, 55.1],['Cheese Cocoa', 86.4, 65.2, 82.5],['Walnut Brownie', 72.4, 53.9, 39.1]]},xAxis: { type: 'category' },yAxis: {},series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]};},//主题选择面板按钮oprBtn(){let index = 0;let arrTmp = [];let displayBtn = ['azul', 'bee-inspired', 'blue', 'caravan','carp', 'cool', 'dark', 'dark-blue','dark-bold', 'dark-digerati', 'dark-fresh-cut', 'dark-mushroom','eduardo', 'forest', 'fresh-cut', 'fruit','gray', 'green', 'helianthus', 'infographic', 'inspired','jazz', 'london', 'macarons', 'macarons2','mint', 'red', 'red-velvet', 'roma','royal', 'sakura', 'shine', 'tech-blue', 'vintage'];for (let i = 0; i < displayBtn.length; i++) {index = parseInt(i / 4);if (arrTmp.length <= index) {arrTmp.push([]);}arrTmp[index].push(displayBtn[i])}return arrTmp;}},methods: {handleToggle(theme) {statisticsChart.dispose(); //销毁echartsstatisticsChart = echarts.init(this.$refs.statisticsChart, theme,{renderer:'svg'}); //svg格式显示图表statisticsChart.setOption(this.options);this.dialogVisible = false;},}
}
</script><style scoped>.statistics {width: 960px;height: 550px;background-color: #ffffff;padding: 20px;border-radius: 20px;
}.cab {padding-left: 40px;padding-right: 10px;height: 480px;
}/*头区样式*/
/deep/ .class_dialog_hospital .el-dialog__header {background: #F0FFF0;padding: 4px 0 4px 10px;border-top-left-radius: 9px;border-top-right-radius: 9px;height: 45px;line-height: 45px;font-family: "PingFang SC";
}/*头区退出按钮样式*/
/deep/ .class_dialog_hospital .el-dialog__headerbtn {top: 10px;right: 10px;font-size: 15px;
}/*样式穿透*//*对话框区*/
/deep/ .class_dialog_hospital .el-dialog {border: 1px solid #DCDFE6;box-shadow: 0 0 4px #e6e6e6;border-radius: 10px;padding: 0;
}/*内容区*/
/deep/ .class_dialog_hospital .el-dialog__body {padding: 10px 0px 10px 0px;
}/deep/ .cab .is-horizontal {display: none;
}/deep/ .cab .el-scrollbar__wrap {overflow-x: hidden;
}</style>4、面板所需图片文件
图片文件
