vue+iview+echarts 循环显示echarts折线图且放大该图表

最新推荐文章于 2023-02-01 11:36:13 发布

Yilia-Feng

最新推荐文章于 2023-02-01 11:36:13 发布

阅读量1.2k

点赞数 1

分类专栏： vue echarts iview

本文链接：https://blog.csdn.net/canshegui2293/article/details/115938413

版权

vue 同时被 3 个专栏收录

63 篇文章 2 订阅

订阅专栏

iview

16 篇文章 1 订阅

订阅专栏

echarts

8 篇文章 0 订阅

订阅专栏

先上效果图
在这里插入图片描述

需求:一共有四种云平台类型分别为:Aws、阿里云、Azure、Vmware,针对这四种类型循环显示各类型的直线图

循环不同种类折线图

<Row :gutter="16">
    <Col span="6" v-for="(item,index) in (this.$route.query.accountTypeName=='AWS'? awsList:this.$route.query.accountTypeName=='Aliyun'? alyList:this.$route.query.accountTypeName=='Azure'? azureList:vmwareList)" :key="index">
        <Card :padding="8">
            <p slot="title">{{item.title}}</p>
            <a href="#" slot="extra" @click.prevent="changeFull(item)">
                <Icon type="ios-expand" size="18"/>
            </a>
            <div :id="item.id" :ref="item.id" style="width:100%;height: 240px;"></div>
        </Card>
    </Col>
</Row>

放大弹出框

<Modal v-model="isShowModal" :mask-closable="false" :closable="false" width="65%">
    <Row>
        <Col span="24">
            <h3>{{lineTitle}}</h3>
            <div id="chart-part" ref="fullChart" style="width:100%; height:420px;"></div>
        </Col>
    </Row>
    <div slot="footer">
        <div>
            <Button @click="cancel">{{$t('alarms.common.close')}}</Button>
        </div>
    </div>
</Modal>

初始化数据

data () {
   return {
        // 放大功能
        lineTitle:'',
        isShowModal: false,
        // aws折线图
        awsList: [{
            id: 'cpus',
            title:this.$t('alarms.instance.line.CPUUtilizationPercent')
        },
        {
            id: 'memoryUtilizations',
            title:this.$t('alarms.instance.line.MemoryUsagePercentage')
        }],
        // 阿里云折线图
        alyList: [{
            id: 'cpuUtilization',
            title:this.$t('alarms.instance.line.CPUUtilizationPercent')
        },
        {
            id: 'memoryUtilizationALYs',
            title:this.$t('alarms.instance.line.MemoryUsagePercentage')
        }],
        // azure折线图
        azureList: [{
            id: 'cpuUtilizationAzure',
            title:this.$t('alarms.instance.line.CPUUtilizationPercent')
        },
        {
            id: 'memoryUtilizationAzure',
            title:this.$t('alarms.instance.line.MemoryUsagePercentage')
        }],
        // vmware折线图
        vmwareList: [{
            id: 'cpuUtilizationVmware',
            title:this.$t('alarms.instance.line.CPUUtilizationPercent')
        },
        {
            id: 'memoryUtilizationVmware',
            title:this.$t('alarms.instance.line.MemoryUsagePercentage')
        }],
        // echarts实例
        chart:'',
        chartMemoryUtilization:'', //aws
        chartCpuUtilization:'',
        chartmemoryUtilizationALYs:'',//阿里云
        chartCpuUtilizationAzure:'',
        chartmemoryUtilizationAzure:'',//azure
        chartCpuUtilizationVmware:'',
        chartMemoryUtilizationVmware:'',//vmware     
        cpusOption:{},
        memoryUtilizationsOption:{},//aws
        cpuUtilizationOption:{},
        memoryUtilizationALYsOption:{},//阿里云
        cpuUtilizationAzureOption:{},
        memoryUtilizationAzureOption:{},//azure
        cpuUtilizationVmwareOption:{},
        memoryUtilizationVmwareOption:{},//vmware
        // AWS数组
        cpuUtilizations:[],
        memoryUtilization:[],
        xaxisData:[],
        //阿里云数组
        cpuUtilization:[],
		memoryUtilizationALY:[],
        //Azure数组
        azureCpuUsage:[],
        azureTimeline:[],
        azureMemoryPercent:[],
        azureMemoryAndStorageXAxes:[],
        //Vmware数组
        vmWareTimeline:[],
        vmWareMemoryUsage:[],
        vmWareCpuUsage:[]
    }
},

自适应不同屏幕

mounted: function(){
   if(this.$route.query.accountTypeName=='AWS'){
        // 自适应不同屏幕尺寸
        const self=this;
        window.addEventListener("resize",function(){
            self.chart.resize();
            self.chartMemoryUtilization.resize();
        });
    }else if(this.$route.query.accountTypeName=='Aliyun'){
        // 自适应不同屏幕尺寸
        const self=this;
        window.addEventListener("resize",function(){
            self.chartCpuUtilization.resize();
            self.chartmemoryUtilizationALYs.resize();
        });
    }else if(this.$route.query.accountTypeName=='Azure'){
        // 自适应不同屏幕尺寸
        const self=this;
        window.addEventListener("resize",function(){
            self.chartCpuUtilizationAzure.resize();
            self.chartmemoryUtilizationAzure.resize();
        });
    }else if(this.$route.query.accountTypeName=='VMware'){
        // 自适应不同屏幕尺寸
        const self=this;
        window.addEventListener("resize",function(){
            self.chartCpuUtilizationVmware.resize();
            self.chartMemoryUtilizationVmware.resize();
        });
    }
},

创建画布调用后端接口

created(){
   if(this.$route.query.accountTypeName=='AWS'){
       this.checkMonitorModuleIndex();
   }else if(this.$route.query.accountTypeName=='Aliyun'){
       this.checkALIECSIndex();
   }else if(this.$route.query.accountTypeName=='Azure'){
       this.checkAzureVmIndex();
   }else if(this.$route.query.accountTypeName=='VMware'){
       this.checkVmwareMonitorModuleIndex();
   }
},

点击放大按钮

methods: {
	/******************放大********************************/
    changeFull:function(item){
        this.isShowModal=true;
        this.lineTitle=item.title;
        this.$nextTick(() => {
            const chartFul = this.$refs.fullChart;
            if(chartFul){
                const fullChart = this.$echarts.init(
                    document.getElementById("chart-part")
                );
                fullChart.clear();
                // AWS
                if(item.id=='cpus'){
                    var optionFll = this.cpusOption;
                }else if(item.id=='memoryUtilizations'){
                    var optionFll = this.memoryUtilizationsOption;
                }
                // 阿里云
                else if(item.id=='cpuUtilization'){
                    var optionFll = this.cpuUtilizationOption;
                }else if(item.id=='memoryUtilizationALYs'){
                    var optionFll = this.memoryUtilizationALYsOption;
                }
                // azure
                else if(item.id=='cpuUtilizationAzure'){
                    var optionFll = this.cpuUtilizationAzureOption;
                }else if(item.id=='memoryUtilizationAzure'){
                    var optionFll = this.memoryUtilizationAzureOption;
                }
                // vmware
                else if(item.id=='cpuUtilizationVmware'){
                    var optionFll = this.cpuUtilizationVmwareOption;
                }else if(item.id=='memoryUtilizationVmware'){
                    var optionFll = this.memoryUtilizationVmwareOption;
                }
                
                fullChart.setOption(optionFll);
                window.addEventListener("resize", function() {
                    fullChart.resize();
                });    
            }
        });
    },
    // 模态框取消事件
    cancel() {
        this.isShowModal = false;
    },
}

以下拿aws举例
azure、阿里云、vmware同理这里就不一一粘贴了

// AWS折线图
checkMonitorModuleIndex: function(){
    this.$api.cloudWatch.checkMonitorModuleIndex({
        "accountId":this.$route.query.accountId,
        "timeHorizon":this.timeType,
        "period": this.cycle,
        "monitorModule":0,
        "instanceId":this.$route.query.instanceId,
        "region":this.$route.query.region
    })
    .then(res => {
        this.cpuUtilizations = res.data.cpuUtilizations;
        this.memoryUtilization = res.data.memoryUtilization;
        this.xaxisData = res.data.xaxisData;
        this.init();
    })
},

init:function(){
     this.cpusLine();
     this.chartDiskReadAndWriteLine();
 },

echarts折线图表

/*************AWS折线图*****************************/
// CPU利用率 (百分比)
 cpusLine:function(){
     this.chart=this.$echarts.init(this.$refs.cpus[0]);
     this.cpusOption={
         tooltip : {
             trigger: 'axis',
             axisPointer: {
                 type: 'cross',
                 label: {
                     backgroundColor: '#6a7985'
                 }
             }
         },
         // CPU利用率
         legend: {
             x: 'right',
             y: '10px',
             data:[this.$t('alarms.instance.line.CPUUtilization')]
         },
         series: [{
             name:this.$t('alarms.instance.line.CPUUtilization'),
             type:'line',
             data:this.cpuUtilizations,
             itemStyle: {
                 normal: {
                     color: "#91c7ae",
                     lineStyle: {
                         color: "#91c7ae"
                     }
                 }
             }
         }],
         grid: {
             top:'20%',
             left: '3%',
             bottom: '3%',
             containLabel: true
         },
         xAxis : [
             {
                 type : 'category',
                 boundaryGap : false,
                 data: this.xaxisData.map(function (str) {
                     return str.replace(' ', '\n')
                 })
             }
         ],
         yAxis : [
             {
                 splitNumber:4,
                 type : 'value'
             }
         ]
     };
     this.chart.setOption(this.cpusOption)
 },
  // 内存使用率 (百分比)
 memoryUtilizationLine:function(){
     this.chartMemoryUtilization=this.$echarts.init(this.$refs.memoryUtilizations[0]);
     this.memoryUtilizationsOption={
         tooltip : {
             trigger: 'axis',
             axisPointer: {
                 type: 'cross',
                 label: {
                     backgroundColor: '#6a7985'
                 }
             }
         },
         // 内存使用率
         legend: {
             x: 'right',
             y: '10px',
             data:[this.$t('alarms.instance.line.MemoryUsage')]
         },
         series: [{
             name:this.$t('alarms.instance.line.MemoryUsage'),
             type:'line',
             data:this.memoryUtilization,
             itemStyle: {
                 normal: {
                     color: "#ceca58",
                     lineStyle: {
                         color: "#ceca58"
                     }
                 }
             }
         }],
         grid: {
             top:'20%',
             left: '3%',
             bottom: '3%',
             containLabel: true
         },
         xAxis : [
             {
                 type : 'category',
                 boundaryGap : false,
                 data: this.xaxisData.map(function (str) {
                     return str.replace(' ', '\n')
                 })
             }
         ],
         yAxis : [
             {
                 splitNumber:4,
                 type : 'value'
             }
         ]
     };
     this.chartMemoryUtilization.setOption(this.memoryUtilizationsOption)
 },

以上还不是最完美的如果要做到最优 echarts需封装一下