|
|
|
@ -2,7 +2,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<!-- echart表格 -->
|
|
|
|
|
<div ref="bar_dv" :style="echartStyle"></div>
|
|
|
|
|
<div ref="bar_dv" :style="echartStyle"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
@ -57,62 +57,144 @@
|
|
|
|
|
},
|
|
|
|
|
data(){
|
|
|
|
|
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: {
|
|
|
|
|
drawLine() {
|
|
|
|
|
this.charts = echarts.init(this.$refs.bar_dv);
|
|
|
|
|
if(this.isType==="manyBar"){
|
|
|
|
|
this.autoHeight = this.legendData.length* 35 + 50; // counst.length为柱状图的条数,即数据长度。35为我给每个柱状图的高度,50为柱状图x轴内容的高度(大概的)。
|
|
|
|
|
this.charts.resize({height:this.autoHeight<400?400:this.autoHeight});
|
|
|
|
|
if (this.isType === "manyBar") {
|
|
|
|
|
this.autoHeight = this.legendData.length * 35 + 50; // counst.length为柱状图的条数,即数据长度。35为我给每个柱状图的高度,50为柱状图x轴内容的高度(大概的)。
|
|
|
|
|
this.charts.resize({height: this.autoHeight < 400 ? 400 : this.autoHeight});
|
|
|
|
|
}
|
|
|
|
|
let xAxis={};
|
|
|
|
|
let yAxis={};
|
|
|
|
|
if(this.isType==="across"){
|
|
|
|
|
xAxis={
|
|
|
|
|
let xAxis = {};
|
|
|
|
|
let yAxis = {};
|
|
|
|
|
if (this.isType === "across") {
|
|
|
|
|
xAxis = {
|
|
|
|
|
type: "value",
|
|
|
|
|
name:this.yAxisName
|
|
|
|
|
name: this.yAxisName,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
yAxis={
|
|
|
|
|
yAxis = {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: this.xAxisData,
|
|
|
|
|
name:this.xAxisName,
|
|
|
|
|
name: this.xAxisName,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}else if(this.isType==='time'){
|
|
|
|
|
xAxis={
|
|
|
|
|
} else if (this.isType === 'time') {
|
|
|
|
|
xAxis = {
|
|
|
|
|
type: 'time',
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
splitNumber:2
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
splitNumber: 2,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
yAxis= {
|
|
|
|
|
yAxis = {
|
|
|
|
|
type: 'value',
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// boundaryGap: [0, '100%']
|
|
|
|
|
}
|
|
|
|
|
}else if(this.isType==="manyBarFloor"){
|
|
|
|
|
xAxis={
|
|
|
|
|
} else if (this.isType === "manyBarFloor") {
|
|
|
|
|
xAxis = {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: this.xAxisData,
|
|
|
|
|
name:this.xAxisName,
|
|
|
|
|
name: this.xAxisName,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval:0,
|
|
|
|
|
rotate:40
|
|
|
|
|
interval: 0,
|
|
|
|
|
rotate: 40,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
yAxis={
|
|
|
|
|
yAxis = {
|
|
|
|
|
type: "value",
|
|
|
|
|
name:this.yAxisName
|
|
|
|
|
name: this.yAxisName,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}else{
|
|
|
|
|
xAxis={
|
|
|
|
|
} else {
|
|
|
|
|
xAxis = {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: this.xAxisData,
|
|
|
|
|
name:this.xAxisName,
|
|
|
|
|
name: this.xAxisName,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
yAxis={
|
|
|
|
|
yAxis = {
|
|
|
|
|
type: "value",
|
|
|
|
|
name:this.yAxisName
|
|
|
|
|
name: this.yAxisName,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
this.charts.setOption({
|
|
|
|
@ -125,18 +207,21 @@
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
x:'center',
|
|
|
|
|
y:this.isType==='time'||this.isType==='manyBarFloor'||this.isType==='across'?'top':'bottom',
|
|
|
|
|
data: this.legendData
|
|
|
|
|
x: 'center',
|
|
|
|
|
y: this.isType === 'time' || this.isType === 'manyBarFloor' || this.isType === 'across' ? 'top' : 'bottom',
|
|
|
|
|
data: this.legendData,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: this.echartColor//字体颜色
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
dataZoom: this.isType==='time'?[{
|
|
|
|
|
dataZoom: this.isType === 'time' ? [{
|
|
|
|
|
type: 'inside',
|
|
|
|
|
start: 10,
|
|
|
|
|
end: 30,
|
|
|
|
|
}, {
|
|
|
|
|
start: 10,
|
|
|
|
|
end: 30,
|
|
|
|
|
}]:this.isType==="manyBarFloor"||this.isType==="across"?[ {
|
|
|
|
|
}] : this.isType === "manyBarFloor" || this.isType === "across" ? [{
|
|
|
|
|
show: true,
|
|
|
|
|
realtime: true,
|
|
|
|
|
start: 0,
|
|
|
|
@ -147,9 +232,9 @@
|
|
|
|
|
realtime: true,
|
|
|
|
|
start: 0,
|
|
|
|
|
end: 50
|
|
|
|
|
}]:[],
|
|
|
|
|
}] : [],
|
|
|
|
|
series: this.seriesData,
|
|
|
|
|
tooltip : {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross',
|
|
|
|
@ -164,7 +249,7 @@
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
|
|
this.$nextTick(function() {
|
|
|
|
|
this.$nextTick(function () {
|
|
|
|
|
this.drawLine('barChart')
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
@ -172,7 +257,7 @@
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
#barChart{
|
|
|
|
|
#barChart {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|