|
@@ -63,29 +63,53 @@ export default {
|
|
|
return {
|
|
|
id: "",
|
|
|
chart: null,
|
|
|
- lineStyles: [
|
|
|
- {
|
|
|
- areaStyle: {
|
|
|
- color: "rgba(75,85,174, 0.9)",
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(255,255,255, 0.85)",
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- color: "rgba(75,85,174, 0.5)",
|
|
|
- borderColor: "rgba(255,255,255, 0.5)",
|
|
|
- borderWidth: 0.5,
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
+ lineStyles: [],
|
|
|
+ green:{
|
|
|
+ areaStyle: {
|
|
|
+ color: "rgba(165,228,175, 0.9)",
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255,255,255, 0.85)",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(165,228,175, 0.5)",
|
|
|
+ borderColor: "rgba(255,255,255, 0.5)",
|
|
|
+ borderWidth: 0.5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ blue:{
|
|
|
+ areaStyle: {
|
|
|
+ color: 'rgba(75,85,174, 0.9)',
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255,255,255, 0.85)",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color:'rgba(75,85,174, 0.9)',
|
|
|
+ borderColor: "rgba(255,255,255, 0.5)",
|
|
|
+ borderWidth: 0.5,
|
|
|
+ },
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
initChart() {
|
|
|
+ let themeName = '';
|
|
|
+ let theme = this.$store.state.themeName;
|
|
|
+ if(theme == 'dark' || theme == 'light'){
|
|
|
+ themeName = theme;
|
|
|
+ }else{
|
|
|
+ themeName = theme.split(' ')[1];
|
|
|
+ }
|
|
|
let chart = echarts.init(this.$el);
|
|
|
|
|
|
let maxValue = -1;
|
|
|
+ if(themeName === "dark"){
|
|
|
+ this.lineStyles = [this.green,this.blue];
|
|
|
+ }else{
|
|
|
+ this.lineStyles = [this.blue,this.green];
|
|
|
+ }
|
|
|
if (this.value.data)
|
|
|
this.value.data.forEach((item, index) => {
|
|
|
item.value.forEach((value) => {
|
|
@@ -116,10 +140,10 @@ export default {
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
- backgroundColor: "rgba(0,0,0,0.4)",
|
|
|
- borderColor: partten.getColor("gray"),
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
+ backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
|
|
|
+ borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
|
|
|
+ textStyle: {
|
|
|
+ color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
|
|
|
fontSize: util.vh(16),
|
|
|
},
|
|
|
position: function(pos, params, dom, rect, size) {
|
|
@@ -140,20 +164,20 @@ export default {
|
|
|
nameGap: "4",
|
|
|
name: {
|
|
|
textStyle: {
|
|
|
- color: partten.getColor("gray"),
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
|
|
|
fontSize: 12,
|
|
|
padding: [0, 16],
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000" + 40,
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000" + 40,
|
|
|
},
|
|
|
},
|
|
|
splitArea: {
|
|
@@ -174,7 +198,7 @@ export default {
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000" + 40,
|
|
|
shadowBlur: 1,
|
|
|
shadowColor: "#fff",
|
|
|
shadowOffsetX: 0.5,
|
|
@@ -184,7 +208,7 @@ export default {
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000" + 40,
|
|
|
shadowColor: "#fff",
|
|
|
shadowBlur: 0,
|
|
|
shadowOffsetX: 0.5,
|
|
@@ -208,13 +232,13 @@ export default {
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000" + 40,
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
- color: partten.getColor("gray"),
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
|
|
|
},
|
|
|
},
|
|
|
splitArea: {
|
|
@@ -232,7 +256,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: partten.getColor("green") + 60, // 100% 处的颜色
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("green") + 60 : partten.getColor("deepblue") + 60, // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
@@ -251,13 +275,13 @@ export default {
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000" + 40,
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
- color: partten.getColor("gray"),
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
|
|
|
},
|
|
|
},
|
|
|
splitArea: {
|
|
@@ -275,7 +299,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: partten.getColor("green") + 60, // 100% 处的颜色
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("green") + 60 : partten.getColor("deepblue") + 60, // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
@@ -294,13 +318,13 @@ export default {
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000" + 40,
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
- color: partten.getColor("gray"),
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
|
|
|
},
|
|
|
},
|
|
|
splitArea: {
|
|
@@ -321,13 +345,13 @@ export default {
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: partten.getColor("gray") + 40,
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000" + 40,
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
- color: partten.getColor("gray"),
|
|
|
+ color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
|
|
|
},
|
|
|
},
|
|
|
splitArea: {
|
|
@@ -366,6 +390,11 @@ export default {
|
|
|
this.initChart();
|
|
|
});
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ "$store.state.themeName"() {
|
|
|
+ this.initChart();
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|