<template>
|
<div class="leftMnu">
|
<div class="menuBox">
|
<div class="aside-title">{{ title.t1 }}</div>
|
<div class="echartBox">
|
<div id="letftEchart1" class="chartBox"></div>
|
</div>
|
</div>
|
<div class="menuBox">
|
<div class="aside-title">{{ title.t2 }}</div>
|
</div>
|
<div class="menuBox">
|
<div class="aside-title">{{ title.t3 }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
export default {
|
props: {
|
leftChartData: {
|
type: Object,
|
required: true
|
},
|
},
|
data() {
|
return {
|
title: {
|
t1: 'xxx',
|
t2: 'XXXX',
|
t3: 'xxxxx'
|
},
|
myLeftChart1: null,
|
leftChartOption: {
|
lenData: [],
|
xData: [],
|
serData: [],
|
},
|
}
|
},
|
watch: {
|
leftChartData: {
|
deep: true,
|
handler(res) {
|
if (res) {
|
if (res.type == "left1") {
|
this.setLeftChart1(res.val)
|
}
|
}
|
|
}
|
}
|
},
|
methods: {
|
setLeftChart1(res) {
|
console.log(res);
|
|
if (!this.myLeftChart1) {
|
this.myLeftChart1 = echarts.init(document.getElementById('letftEchart1'));
|
}
|
if (this.leftChartOption.lenData.length == 0) {
|
this.title.t1 = res.head[1]
|
this.leftChartOption.lenData.push(res.head[0])
|
const colors=['#67C23A','#E6A23C','#F56C6C']
|
for (var i = 0; i < 3; i++) {
|
this.leftChartOption.serData.push({
|
name: res.head[i+1],
|
type: 'line',
|
stack: 'Total',
|
data: [],
|
lineStyle: {
|
color: colors[i], // 折线颜色
|
|
}
|
})
|
}
|
}
|
var option = this.getChartOption(res)
|
this.myLeftChart1 && this.myLeftChart1.setOption(option);
|
},
|
getChartOption(res) {
|
for(var i = 0;i<3;i++){
|
this.leftChartOption.serData[i].data.push(res.data[i+1])
|
}
|
|
|
this.leftChartOption.xData.push(res.data[0])
|
return {
|
legend: {
|
show: false
|
},
|
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: this.leftChartOption.xData,
|
axisLine: {
|
lineStyle: {
|
color: 'white' // 设置为红色
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
color: 'white' // 设置为红色
|
}
|
}
|
},
|
series: this.leftChartOption.serData
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.leftMnu {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.menuBox {
|
width: 100%;
|
height: 33%;
|
background: url(~@/assets/images/Screen/chartbg.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
display: flex;
|
flex-direction: column;
|
|
.aside-title {
|
box-sizing: border-box;
|
padding-left: 30px;
|
|
font-size: 15px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
|
color: #fff;
|
width: 100%;
|
height: 45px;
|
line-height: 45px;
|
// background: url(~@/assets/images/Screen/asideTitleBg.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
|
.echartBox {
|
flex: 1;
|
padding: 5px;
|
position: relative;
|
|
.chartBox {
|
width: calc(100% - 10px);
|
height: calc(100% - 10px);
|
|
position: absolute;
|
}
|
}
|
}
|
}
|
</style>
|
