框架：Vue+less+ECharts实现了将换肤值存储在localStorage中的思想，登录后从localStorage中设置换肤值。点击换肤的时候，给身体设置不同的类名，在每个类名下调用less的函数，传入不同的颜色值。函数中使用变量来设置颜色。变量可以使用less变量或者CSS变量。定义的CSS变量也可以在各个.vue页面中使用，更加灵活。环境安装lessnpminstall--savelessless-loaderlesstutorialwebpackconfigurationmodule:{rules:[{test:/\.less$/,use:[{loader:'style-loader'//让css正确的通过js导入},{loader:'css-loader',//css导入后，可以通过style标签正确插入到页面中options:{}},{loader:'less-loader'//定义的loaderlaterisfirstExecute}]}]}注：如果使用VueCli生成项目，则不需要配置。（官方文档）如果需要添加额外的webpack配置，可以在根目录下新建vue.config.js文件。（官方文档）Codeless代码，也可以使用CSS变量实现换肤定义主题功能，需要换肤的颜色样式使用变量，传入默认值//static/less/theme.less.theme(@primary-color:#2d8cf0;@text-color:red;@background-color:#fff;){/*CSS变量*/body{--color-title:#1c2438;--颜色边框：#dddee1；--color-bg:#f1f1f1;}.wrapper{颜色：@text-color;背景色：@背景色；border:1pxsolidvar(--color-border);}.button-primary{背景颜色：@primary-color;}}定义不同皮肤下的类名，调用主题函数，传入变量值//static/less/color.less@import'./theme.less';//默认样式，使用默认颜色值.theme-default{.theme()}//蓝色皮肤，输入颜色值//定义CSS变量value.theme-blue{--color-title:#eeeeee;--颜色边框：#315280；--颜色背景：#162947；.theme(@primary-color:#227fdf;@background-color:#162947;@text-color:#b5bbc9;)}点击切换皮肤//html
默认blue
//jsexportdefault{created(){this.$store.commit('changeSkinColor',this.$store.getters.getTheme)},methods:{changeSkinTheme(skinTheme){如果(skinTheme!==this.$store.getters.getTheme){window.location.reload()this.$store.commit('setTheme',skinTheme)this.$store.commit('changeSkinColor',skinTheme)}}}使用Vuex管理皮肤值，从localStorage中读取和存储//store/module/menu.jsimport$from'jquery'letuserConfig=JSON.parse(window.localStorage.getItem('userConfig'))letdefaultUserConfig={theme:'default'}userConfig=$.extend(defaultUserConfig,userConfig)conststate={theme:userConfig.theme,themeList:['default','blue'],echartsTheme:'light'}constgetters={getTheme:state=>state.theme,getEchartsTheme:state=>state.echartsTheme,}constmutations={//设置echarts主题setEchartsTheme(state,theme){letechartsTheme='light'if(theme){switch(theme){case'blue':echartsTheme='blue'break}}state.echartsTheme=echartsTheme},//设置主题setTheme(state,theme){if(主题&&state.themeList.indexOf(theme)>-1){state.theme=themeconsole.log(state.theme)letuserConfig=JSON.parse(window.localStorage.getItem('userConfig'))!userConfig&&(userConfig={})userConfig.theme=themewindow.localStorage.setItem('userConfig',JSON.stringify(userConfig))}},//根据主题修改皮肤changeSkinColor(state,theme){switch(theme){case'default':$('body').removeClass('theme-blue')$('body').addClass('theme-default')breakcase'blue':$('body').removeClass('theme-default')$('body').addClass('theme-blue')break}this.commit('setEchartsTheme',theme)}}exportdefault{状态,getters,mutations}实现echarts换肤echarts官网主题在线构建自定义主题-下载配置-选择json文件（项目中使用）同时导出配置（为下次导入配置修改，可以预览效果）//main.js//导入less文件import'./static/less/color.less'importechartsfrom'echarts'//导入echarts主题配置文件importblueEchartsThemefrom'./static/vendor/purple-passion.json'//注册主题echarts.registerTheme('blue',blueEchartsTheme)//生成图表实例时，传入第二个参数作为echarts主题this.$echarts.init(document.getElementById('line_chart'),this.$store.getters.getEchartsTheme)
