1.添加监听事件
mounted() {
//添加页面改变监听
window.addEventListener('resize',this.resizeHandler)
},
记得页面销毁时候去掉监听
beforeDestroy() {
//销毁页面改变监听
window.removeEventListener('resize',this.resizeHandler)
},
2.添加自适应函数
resizeHandler(){
this.drawNHLine();
}
说明:this.drawNHLine() 方法是具体画线方法,这里主要是调用 echart中的resize()方法。
3.echart中的resize()
//自适应
myChart.resize();
//添加统计图内容
4. script 核心方法
<script>
import "../../../styles/reset_elementui.css";//导入自定义样式
import { listRoom } from '../../../api/system/room';
import { listUps } from '../../../api/system/ups';
import { listArea,getArea } from '../../../api/mes/area';
import { listComprehensiveAnalysis, listGroupVoltage } from '../../../api/mes/batteryinfo';
import echarts from 'echarts';
export default {
name: 'basetable',
data() {
return {
//查询条件
query: {
MAC: undefined,
Number: undefined,
pageIndex: 1,
pageSize: 50
}
};
},
created() {this.drawNHLine();
},
mounted() {
//添加页面改变监听
window.addEventListener('resize',this.resizeHandler)
},
beforeDestroy() {
//销毁页面改变监听
window.removeEventListener('resize',this.resizeHandler)
},
methods: {
// 触发搜索按钮
handleQuery() {
this.$set(this.query, 'pageIndex', 1);
this.drawNHLine();
},
//画曲线
drawNHLine(){
//请求后台数据
if(this.timeValue.length>1 && this.query.MAC !=undefined){
//时间格式转换 Thu May 12 2016 08:00:00 GMT+0800 (中国标准时间)
//日期装换
const date =new Date(this.dateValue);
const dateValue= date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0');
//时间转换
let d = new Date(this.timeValue[0]);
let starTime = d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0') + ':' + d.getSeconds().toString().padStart(2, '0');
let d1 = new Date(this.timeValue[1]);
let endTime = d1.getHours().toString().padStart(2, '0') + ':' + d1.getMinutes().toString().padStart(2, '0') + ':' + d1.getSeconds().toString().padStart(2, '0');
this.$set(this.query, 'starTime', dateValue+' '+starTime);
this.$set(this.query, 'endTime', dateValue+' '+endTime);
let myChart=echarts.init(document.getElementById('chartNH'));//能耗统计图句柄
myChart.showLoading({
text: '统计中,请稍候...'
, maskColor: 'rgba(0,0,0,0.8)',
textColor: '#ffffff'
});
//请求后台获取组电压
listComprehensiveAnalysis(this.query).then(res => {
let xData =res.xData;
let seriesData1=res.seriesData1;//内阻
let seriesData2=res.seriesData2;//电压
let seriesData3=res.seriesData3;//温度
myChart.hideLoading();
let option = {
title: {
text: '内阻、电压、温度 综合分析曲线',
subtext: '',
left: 'center',
align: 'right'
},
grid: {
bottom: 80
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765'
}
}
},
legend: {
data: ['内阻(mΩ)','电压(V)','温度(℃)'],
left: 10
},
dataZoom: [
{
show: true,
realtime: true,
start: 65,
end: 85
},
{
type: 'inside',
realtime: true,
start: 65,
end: 85
}
],
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: {onZero: false},
data: xData.map(function (str) {
return str.replace(' ', '\n');
})
}
],
yAxis: [
{
name: '内阻(mΩ)',
type: 'value',
max: 100 //最大值
},
{
name: '电压(V)',
nameLocation: 'start',
max: 100,//99999
type: 'value',
inverse: true
},
{
name: '温度(℃)',
type: 'value',
min : 0,
max: 100, //最大值
position:'right',
interval : 20,//强制设置坐标轴分割间隔。
offset : 60//设置Y轴之间的距离,防止多个Y轴显示重叠
}
],
series: [
{
name: '内阻(mΩ)',
type: 'line',
areaStyle: {},
lineStyle: {
width: 1
},
emphasis: {
focus: 'series'
},
data: seriesData1
},
{
name: '电压(V)',
type: 'line',
yAxisIndex: 1,
areaStyle: {},
lineStyle: {
width: 1
},
emphasis: {
focus: 'series'
},
data: seriesData2
},
{
name: '温度(℃)',
type: 'line',
areaStyle: {},
lineStyle: {
width: 1
},
emphasis: {
focus: 'series'
},
data: seriesData3
}
]
};
//自适应
myChart.resize();
//添加统计图内容
myChart.setOption(option);
});
}
},
resizeHandler(){
this.drawNHLine();
}
}
};
</script>