elementui echart 自适应窗口改变

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();
                    //添加统计图内容
                    myChart.setOption(option);

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>