|
|
@ -57,10 +57,30 @@
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data(){
|
|
|
|
data(){
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
//
|
|
|
|
echartColor: "",
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
|
|
'$store.state.userStore.theme': {
|
|
|
|
|
|
|
|
handler (val) {
|
|
|
|
|
|
|
|
if (val === "systemTheme") {
|
|
|
|
|
|
|
|
this.echartColor = "#fff";
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.echartColor = "#aaaaaa";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.charts) {
|
|
|
|
|
|
|
|
let option = this.charts.getOption();
|
|
|
|
|
|
|
|
option.legend[0].textStyle.color = this.echartColor;
|
|
|
|
|
|
|
|
option.xAxis[0].axisLabel.textStyle.color = this.echartColor;
|
|
|
|
|
|
|
|
option.yAxis[0].axisLabel.textStyle.color = this.echartColor;
|
|
|
|
|
|
|
|
option.xAxis[0].nameTextStyle.color = this.echartColor;
|
|
|
|
|
|
|
|
option.yAxis[0].nameTextStyle.color = this.echartColor;
|
|
|
|
|
|
|
|
this.charts.setOption(option)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
immediate: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
drawLine() {
|
|
|
|
drawLine() {
|
|
|
|
this.charts = echarts.init(this.$refs.bar_dv);
|
|
|
|
this.charts = echarts.init(this.$refs.bar_dv);
|
|
|
@ -73,21 +93,53 @@
|
|
|
|
if (this.isType === "across") {
|
|
|
|
if (this.isType === "across") {
|
|
|
|
xAxis = {
|
|
|
|
xAxis = {
|
|
|
|
type: "value",
|
|
|
|
type: "value",
|
|
|
|
name:this.yAxisName
|
|
|
|
name: this.yAxisName,
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
yAxis = {
|
|
|
|
yAxis = {
|
|
|
|
type: "category",
|
|
|
|
type: "category",
|
|
|
|
data: this.xAxisData,
|
|
|
|
data: this.xAxisData,
|
|
|
|
name: this.xAxisName,
|
|
|
|
name: this.xAxisName,
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
} else if (this.isType === 'time') {
|
|
|
|
} else if (this.isType === 'time') {
|
|
|
|
xAxis = {
|
|
|
|
xAxis = {
|
|
|
|
type: 'time',
|
|
|
|
type: 'time',
|
|
|
|
boundaryGap: false,
|
|
|
|
boundaryGap: false,
|
|
|
|
splitNumber:2
|
|
|
|
splitNumber: 2,
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
yAxis = {
|
|
|
|
yAxis = {
|
|
|
|
type: 'value',
|
|
|
|
type: 'value',
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
// boundaryGap: [0, '100%']
|
|
|
|
// boundaryGap: [0, '100%']
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (this.isType === "manyBarFloor") {
|
|
|
|
} else if (this.isType === "manyBarFloor") {
|
|
|
@ -95,24 +147,54 @@
|
|
|
|
type: "category",
|
|
|
|
type: "category",
|
|
|
|
data: this.xAxisData,
|
|
|
|
data: this.xAxisData,
|
|
|
|
name: this.xAxisName,
|
|
|
|
name: this.xAxisName,
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
axisLabel: {
|
|
|
|
interval: 0,
|
|
|
|
interval: 0,
|
|
|
|
rotate:40
|
|
|
|
rotate: 40,
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
yAxis = {
|
|
|
|
yAxis = {
|
|
|
|
type: "value",
|
|
|
|
type: "value",
|
|
|
|
name:this.yAxisName
|
|
|
|
name: this.yAxisName,
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
xAxis = {
|
|
|
|
xAxis = {
|
|
|
|
type: "category",
|
|
|
|
type: "category",
|
|
|
|
data: this.xAxisData,
|
|
|
|
data: this.xAxisData,
|
|
|
|
name: this.xAxisName,
|
|
|
|
name: this.xAxisName,
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
yAxis = {
|
|
|
|
yAxis = {
|
|
|
|
type: "value",
|
|
|
|
type: "value",
|
|
|
|
name:this.yAxisName
|
|
|
|
name: this.yAxisName,
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.charts.setOption({
|
|
|
|
this.charts.setOption({
|
|
|
@ -127,7 +209,10 @@
|
|
|
|
legend: {
|
|
|
|
legend: {
|
|
|
|
x: 'center',
|
|
|
|
x: 'center',
|
|
|
|
y: this.isType === 'time' || this.isType === 'manyBarFloor' || this.isType === 'across' ? 'top' : 'bottom',
|
|
|
|
y: this.isType === 'time' || this.isType === 'manyBarFloor' || this.isType === 'across' ? 'top' : 'bottom',
|
|
|
|
data: this.legendData
|
|
|
|
data: this.legendData,
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
dataZoom: this.isType === 'time' ? [{
|
|
|
|
dataZoom: this.isType === 'time' ? [{
|
|
|
|
type: 'inside',
|
|
|
|
type: 'inside',
|
|
|
|