通过实现主题选择面板，更方便的对echarts图表进行主题的切换，并且支持饼状图、折线图、柱状图等多类型echarts图表。
目录
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-dialog
title="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(); //销毁echarts
statisticsChart = 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-dialog
title="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(); //销毁echarts
statisticsChart = 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>
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
