149 lines
4.1 KiB
Vue
149 lines
4.1 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
|
||
|
|
<div :id="`lineChart` + num" style="width:100%;height: 100%;" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts'
|
||
|
|
import DateTimeSelect from './dateTimeSelect.vue'
|
||
|
|
export default {
|
||
|
|
name: 'echartsLine',
|
||
|
|
components: {DateTimeSelect},
|
||
|
|
props: {
|
||
|
|
lineData: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
dateShowType: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
chartData: {
|
||
|
|
type: Function,
|
||
|
|
default: () => {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
sideIcon: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
lineData: {
|
||
|
|
handler(val) {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.getList(this.title, this.lineData);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
deep: true,
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
lineDataList: '',
|
||
|
|
num: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.num = Math.floor(Math.random() * 9000);
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (this.lineData && this.lineData.hiddenTime) {
|
||
|
|
this.getList(this.title, this.lineData);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getList(title, dataXY) {
|
||
|
|
const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num));
|
||
|
|
let titleList = {text: title, x: '50%', y: '3%', textAlign: 'center',textStyle: {fontSize: 16}};
|
||
|
|
if (dataXY && dataXY.titleVal) {
|
||
|
|
titleList = Object.assign({},titleList, dataXY.titleVal);
|
||
|
|
}
|
||
|
|
let series = [];
|
||
|
|
if (dataXY && dataXY.dataList) {
|
||
|
|
dataXY.dataList.forEach(item => {
|
||
|
|
series.push({
|
||
|
|
name: item.name,
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: item.data
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
series = [{
|
||
|
|
data: dataXY.data,
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
// areaStyle: { // 阴影
|
||
|
|
// color: 'rgba(140, 158, 217, 1)'
|
||
|
|
// }
|
||
|
|
}];
|
||
|
|
}
|
||
|
|
let option = {
|
||
|
|
title: [titleList],
|
||
|
|
legend: dataXY && dataXY.legend ? dataXY.legend : {},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'cross',
|
||
|
|
label: {
|
||
|
|
backgroundColor: '#6a7985'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: dataXY && dataXY.gridTop || '80px',
|
||
|
|
left: '2%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: dataXY.lineXData
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
name: '单位Mbps',
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: series
|
||
|
|
};
|
||
|
|
lineDataListIntance.setOption(option);
|
||
|
|
// window.addEventListener("resize", () => {
|
||
|
|
// lineDataListIntance.resize()
|
||
|
|
// })
|
||
|
|
},
|
||
|
|
dataChangeValue(val, timeArr, iconVal) {
|
||
|
|
// 调用父级页面传过来的事件，在父级中处理该方法的逻辑--
|
||
|
|
if (timeArr) {
|
||
|
|
this.chartData(timeArr);
|
||
|
|
}
|
||
|
|
if (iconVal) {
|
||
|
|
this.chartData({iconVal: iconVal})
|
||
|
|
}
|
||
|
|
// let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
|
||
|
|
// this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
</style>
|