北京一度网站建设,杭州推荐网站建设团队,丝芭传媒有限公司,wordpress 首页 摘要 插件一键换肤#xff08;Echarts 自定义主题#xff09;
一、使用官方主题配置工具
官方主题配置工具#xff1a;https://echarts.apache.org/zh/theme-builder.html 如果以上主题不满足使用#xff0c;可以自己自定义主题 例如#xff1a;修改背景、标题等#xff0c;可…一键换肤Echarts 自定义主题
一、使用官方主题配置工具
官方主题配置工具https://echarts.apache.org/zh/theme-builder.html 如果以上主题不满足使用可以自己自定义主题 例如修改背景、标题等可按照设计师需求来更改 配置好之后下载主题 有两种方式可选JS 版本、JSON 版本以 JSON 版本为例 复制到项目中 theme.json theme.json 文件示例
{categoryAxis: {axisLine: {show: true,lineStyle: {color: green}},axisTick: {show: true,lineStyle: {color: green}},axisLabel: {show: true,color: green} },valueAxis: {axisLine: {show: false,lineStyle: {color: green}},axisLabel: {show: true,color: green}},legend: {textStyle: {color: green}}
}注册主题
// 引入主题
import theme from ./theme.json// 使用echarts
import echarts from echarts
echarts.registerTheme(customTheme, theme)使用
//使用echarts
div idtest...
/div
scriptlet myChart echarts.init(document.getElementById(test),customTheme);let option {...}myChart.setOption(option);
/script完整代码
templatediv idmain stylewidth: 600px; height: 400px/div
/templatescript
import theme from ./theme.json;
import * as echarts from echarts;export default {mounted() {//注册主题echarts.registerTheme(customTheme, theme);//初始化使用主题var myChart echarts.init(document.getElementById(main), customTheme); // 使用dark 、light或无第二参数myChart.setOption({xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun],},yAxis: {type: value,},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: line,},],});},
};
/script
如果是多主题切换则可以将各个主题的颜色整合在一个文件分别注册
{lightTheme: {categoryAxis: {axisLine: {show: true,lineStyle: {color: #cccccc}},axisTick: {show: true,lineStyle: {color: #cccccc}},axisLabel: {show: true,color: #cccccc}},valueAxis: {axisLine: {show: false,lineStyle: {color: #cccccc}},axisLabel: {show: true,color: #cccccc}},legend: {textStyle: {color: #cccccc}}},darkTheme: {categoryAxis: {axisLine: {show: true,lineStyle: {color: #ffffff}},axisTick: {show: true,lineStyle: {color: #ffffff}},axisLabel: {show: true,color: #ffffff}},valueAxis: {axisLine: {show: false,lineStyle: {color: #ffffff}},axisLabel: {show: true,color: #ffffff}},legend: {textStyle: {color: #ffffff}}}
}这样的话就可以对应官方示例中的这种深色/浅色模式 https://echarts.apache.org/examples/zh/editor.html?cline-simple
二、上述不满足使用的情况 这是因为执行先后顺序 先使用主题色初始化再配置的 optionoption 里的颜色覆盖了主题里的颜色。
这种情况下我这边是用了笨办法一个个去设置大家如果有好的办法可以交流下
给 x 轴、y轴、图例、标题单独设置了 深色模式下的颜色。
定义 darkTheme.json 文件
{title: {textStyle: {color: rgba(255,255,255,0.6)},subtextStyle: {color: rgba(255,255,255,0.6)}},tooltip: {backgroundColor: rgba(5,22,38,0.9),borderColor: rgba(5,22,38,0.9),textStyle: {color: rgba(255,255,255,0.6)}},categoryAxis: {axisLine: {lineStyle: {color: #CCCCCC}}, axisTick: {lineStyle: {color: #CCCCCC}},axisLabel: {color: rgba(255,255,255,0.6)}},valueAxis: {axisLine: {lineStyle: {color: #CCCCCC}},axisLabel: {color: rgba(255,255,255,0.6)},nameTextStyle: {color: rgba(255,255,255,0.6)},splitLine: {lineStyle: {color: rgba(5,22,38,0.7)}}},legend: {textStyle: {color: rgba(255,255,255,0.8)}}
}使用
script
import { cloneDeep } from lodash-es;
import darkTheme from ./darkTheme.json;export default {props: {option: {type: Object,default: null,},},name: ChartCustomEcharts,data() {return {baseChart: null,};},methods: {setOption(option this.option) {if (option this.baseChart) {const result this.getThemeColors(option);this.baseChart.setOption(result, true);}},initChart() {this.baseChart echarts.init(this.$refs[baseChart]);this.setOption();},getThemeColors(data) {const option cloneDeep(data)const themeType this.themeType;if (themeType dark) {// 标题if (option.title) {if (option.title.subtextStyle) {option.title.subtextStyle.color darkTheme.title.subtextStyle.color;}}// 图例if (option.legend) {if (option.legend.textStyle) {option.legend.textStyle.color darkTheme.legend.textStyle.color;} else {option.legend.textStyle darkTheme.legend.textStyle;}}// x轴if (option.xAxis) {if (Array.isArray(option.xAxis)) {option.xAxis.forEach((work) {if (work.axisLabel) {work.axisLabel.color darkTheme.categoryAxis.axisLabel.color;}if (work.axisLine) {if (work.axisLine.lineStyle) {work.axisLine.lineStyle.color darkTheme.categoryAxis.axisLine.lineStyle.color;} else {work.axisLine.lineStyle darkTheme.categoryAxis.axisLine.lineStyle;}}});}}// Y轴if (option.yAxis) {if (Array.isArray(option.yAxis)) {option.yAxis.forEach((work) {if (work.axisLabel) {work.axisLabel.color darkTheme.valueAxis.axisLabel.color;}if (work.axisLine) {if (work.axisLine.lineStyle) {work.axisLine.lineStyle.color darkTheme.valueAxis.axisLine.lineStyle.color;} else {work.axisLine.lineStyle darkTheme.valueAxis.axisLine.lineStyle;}}if(work.splitLine){if(work.splitLine.lineStyle){work.splitLine.lineStyle.color darkTheme.valueAxis.splitLine.lineStyle.color;}else{work.splitLine.lineStyle darkTheme.valueAxis.splitLine.lineStyle}}if (work.nameTextStyle) {work.nameTextStyle.color darkTheme.valueAxis.nameTextStyle.color;}});}}// tooltipif (option.tooltip) {option.tooltip.backgroundColor darkTheme.tooltip.backgroundColor;option.tooltip.borderColor darkTheme.tooltip.borderColor;if (option.tooltip.textStyle) {option.tooltip.textStyle.color darkTheme.tooltip.textStyle.color;} else {option.tooltip.textStyle darkTheme.tooltip.textStyle;}}}return option;},},
};
/script
