一、主题换肤功能设计
定义主题颜色
主题一:theme-default.scss
$theme-default: (
// 主色
ag-main-color1: #005788, // 使用时记得加透明度80%,background-color: rgba(themed('ag-main-color1'), 0.8);
ag-main-color2: #003a5f,
// 字体颜色FFF
ag-font-color1: #fff,
ag-font-color2: #c7e5ff,
ag-font-color3: rgba(#c7e5ff, 0.8),
ag-font-color4: rgba(#c7e5ff, 0.8),
// 辅助色
ag-assist-color1: #38b2ff,
ag-assist-color2: #00ffea,
ag-assist-color3: #00ff90,
ag-assist-color4: #fcc522,
ag-assist-color5: #ff9546,
ag-assist-color6: #f04d60,
ag-assist-color7: #bb6bff,
ag-assist-color8: #3de6ff,
ag-assist-color9: #008aff,
// 分割线
ag-line-color1: rgba(#fff, 0.1)
);
主题二:theme-darkblue.scss
$theme-darkblue: (
// 主色
ag-main-color1:#00098d,// 使用时记得加透明度80%,background-color: rgba(themed('ag-main-color1'), 0.8);
ag-main-color2:#00098d, // TODO 根据UI对应表修正
// 字体颜色FFF
ag-font-color1:#fff,
ag-font-color2:#c7e5ff,
ag-font-color3:rgba(#c7e5ff, 0.8),
ag-font-color4:rgba(#c7e5ff, 0.8),// TODO 根据UI对应表修正
// 辅助色
ag-assist-color1:#38b2ff,
ag-assist-color2:#00ffea,
ag-assist-color3:#49cd45,
ag-assist-color4:#fcc522,
ag-assist-color5:#ff9546,
ag-assist-color6:#f04d60,
ag-assist-color7:#bb6bff,
ag-assist-color8:#0084ff,
ag-assist-color9:#0084ff,// TODO 根据UI对应表修正
// 分割线
ag-line-color1:rgba(#fff, 0.1)
);
主题三:theme-white.scss
$theme-white: (
// 主色
ag-main-color1:#ffffff,// 使用时记得加透明度80%,background-color: rgba(themed('ag-main-color1'), 0.8);
ag-main-color2:#ffffff,// TODO 根据UI对应表修正
// 字体颜色FFF
ag-font-color1:#fff,
ag-font-color2:#333,
ag-font-color3:rgba(#333, 0.8),
ag-font-color4:#666,
// 辅助色
ag-assist-color1:#008aff,
ag-assist-color2:#00d8ff,
ag-assist-color3:#00d020,
ag-assist-color4:#ffa800,
ag-assist-color5:#ff6d00,
ag-assist-color6:#f04d60,
ag-assist-color7:#bb6bff,
ag-assist-color8:#bb7bff,// TODO 根据UI对应表修正
ag-assist-color9:#bb8bff,// TODO 根据UI对应表修正
// 分割线
ag-line-color1:#eee
);
配置主题theme.scss
$themes: (
default: $theme-default,
darkblue: $theme-darkblue,
white: $theme-white
);
@mixin themeify($name: '', $key: '') {
@each $theme-name, $map in $themes {
$theme-map: $map !global;
[data-theme=#{$theme-name}] & {
@if ($name != '' and $key != '') {
#{$name}: map-get($theme-map, $key);
}
@else {
@content;
}
}
}
}
@function themed($key) {
@return map-get($theme-map, $key);
}
// key前面跟上 themeName- 用于区分不同主题的变量
:export {
@each $key, $value in $theme-default {
default-#{$key}: $value;
}
@each $key, $value in $theme-darkblue {
darkblue-#{$key}: $value;
}
@each $key, $value in $theme-white {
white-#{$key}: $value;
}
}
CSS使用主题颜色
.skin {
width: 25px;
height: 25px;
margin-left: 10px;
border: 2px solid #e6e6e6;
border-radius: 3px;
@include themeify {
background-color: rgba(themed('ag-main-color1'), 0.9);
}
}
CSS使用某主题指定颜色
.theme1 {
background: map-get($theme-default, 'ag-main-color1');
}
.theme2 {
background: map-get($theme-darkblue, 'ag-main-color1');
}
.theme3 {
background: map-get($theme-white, 'ag-main-color1');
}
导出变量在JS中使用
所在目录 src/utils/index.js
import store from '@/store/index'
import globalThemeVariables from '@/styles/modules/theme/themes.scss'
// 根据 key 获取全局主题变量值
export function getThemeVariable(key) {
return globalThemeVariables[`${store.state.settings.theme}-${key}`]
}
export default {
install: function(Vue, name = '$utils') {
Object.defineProperty(Vue.prototype, name, {
value: {
getThemeVariable
}
})
}
}
JS使用主题颜色
JS变量会跟随主题二变换颜色
this.$utils.getThemeVariable('ag-main-color1')
JS使用某主题指定颜色
通过对象去获取指定主题颜色
import globalThemeVariables from '@/styles/modules/theme/themes.scss'
console.log(globalThemeVariables['default-ag-main-color1'])
二、Echarts主题颜色换肤
下载 Echarts主题颜色
Echart主题颜色配置,地址:https://echarts.apache.org/zh/theme-builder.html
注意修改文件的registerTheme注册名称为对应主题名称white
(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({}, root.echarts)
}
}(this, function(exports, echarts) {
const log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('white', {// 此处为颜色配置...})
在src/plugins/echarts.js中注册自定义主题
import * as echarts from 'echarts/core'
import {
GridComponent,
TitleComponent,
ToolboxComponent,
TooltipComponent,
LegendComponent,
LegendScrollComponent,
DatasetComponent,
GraphicComponent,
GeoComponent,
DataZoomComponent,
MarkLineComponent,
MarkPointComponent,
PolarComponent
} from 'echarts/components'
import {
LineChart,
BarChart,
PieChart,
LinesChart,
GaugeChart,
GraphChart,
RadarChart,
ScatterChart,
EffectScatterChart
} from 'echarts/charts'
import {
CanvasRenderer
} from 'echarts/renderers'
// 注册自定义主题
import '@/styles/modules/theme/chart-themes/default'
import '@/styles/modules/theme/chart-themes/darkblue'
import '@/styles/modules/theme/chart-themes/white'
echarts.use(
[
GridComponent, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent, LegendScrollComponent, DatasetComponent, GraphicComponent, GeoComponent, DataZoomComponent, MarkLineComponent, MarkPointComponent, PolarComponent,
LineChart, BarChart, PieChart, LinesChart, GraphChart, RadarChart, ScatterChart, EffectScatterChart, GaugeChart,
CanvasRenderer
]
)
export default {
install: function(Vue, name = '$echarts') {
Object.defineProperty(Vue.prototype, name, { value: echarts })
}
}
官方主题使用示例-参考
<script src="theme/white.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'white');
chart.setOption({
...
});
Echarts配置mixins文件
文件src/mixins/chartMixin.js,通过监听 store下的$_theme变化,重新初始化**this.initChart()**函数达到换肤的目的
computed: {
...mapState({
$_theme: state => state.settings.theme
})
},
watch: {
'$store.state.settings.sidebarCollapse'() {
this.$_resizeHandler && this.$_resizeHandler()
},
$_theme: function() {
console.log(this.$_theme)
// TODO 写进文档,固定名称
if (this.chart && this.initChart) {
this.chart.dispose()
this.initChart()
}
}
},
Echarts使用chartMixin文件
需要加入指定代码,this.chart = this. e c h a r t s . i n i t ( t h i s . echarts.init(this. echarts.init(this.refs[‘chart’], this.$_theme),在图表中变量this.chart 和函数this.initChart()必须存在。
import { mapState } from 'vuex'
import chartMixin from '@/mixins/chartMixin'
export default {
name: 'IntelligentDiagnosisPanel',
mixins: [chartMixin], // 加入mixins
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
const setOption={} // 配置中可以通过color: this.$utils.getThemeVariable('ag-font-color1'),定义颜色哦
this.chart = this.$echarts.init(this.$refs['chart'], this.$_theme) // 此处this.$_theme在mixins定义了
this.chart.setOption(setOption)
}
}
}
</script>