115 lines
3.0 KiB
Vue
115 lines
3.0 KiB
Vue
<template>
|
|
<div>
|
|
<DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :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: () => {
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
lineDataList: '',
|
|
num: ''
|
|
}
|
|
},
|
|
created() {
|
|
this.num = Math.floor(Math.random() * 9000);
|
|
},
|
|
mounted() {
|
|
if (this.lineData && this.lineData.hiddenTime) {
|
|
this.getList(this.title, {data: this.lineData.data, lineXData: this.lineData.lineXData});
|
|
}
|
|
},
|
|
methods: {
|
|
getList(title, dataXY) {
|
|
const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num))
|
|
let option = {
|
|
title: [{
|
|
text: title,
|
|
x: '50%',
|
|
y: '3%',
|
|
textAlign: 'center',
|
|
}],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
top: '20%',
|
|
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: [
|
|
{
|
|
data: dataXY.data,
|
|
type: 'line',
|
|
// areaStyle: { // 阴影
|
|
// color: 'rgba(140, 158, 217, 1)'
|
|
// }
|
|
}
|
|
]
|
|
};
|
|
lineDataListIntance.setOption(option);
|
|
// window.addEventListener("resize", () => {
|
|
// lineDataListIntance.resize()
|
|
// })
|
|
},
|
|
dataChangeValue(val, days) {
|
|
let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
|
|
this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
</style>
|