<template> <div class="h100p"> <div class="basic_title">监控</div> <div v-for="(item,index) in containerMonitor" :key="index"> <div class="basic_model" style="margin-top: 10px;!important;"> <div class="dIB mL10" style="width:99%"> <span class="fs12 fwb">{{item.name}}</span> //定义一个div装监控图表 <div :id="getChartName(item.chartId)" style="width: 100%;height: 190px"></div> </div> </div> </div> </div> </template> <style lang="scss"> .nodeDetail { min-height:100%; padding: 10px; background: #f9f9f9; } </style> <script> import echarts from 'echarts' export default{ data () { return { infoData:{}, containerMonitor:[ {name:'CPU使用量(core)',chartId:'_cpuUsedCiCharts'} ], //option cpuUsedCiChartOption: { tooltip: { trigger: 'axis', //弹出的自定义信息 formatter: function(data){ return data[0].axisValueLabel + '<br/>' + data[0].marker +'' +data[0].seriesName + ':'+(data[0].value[1])+'%';
}
}, legend: { top: 0, right:25, icon:'circle', data:[''] }, color:['#2191ca'], calculable: true, grid:{ x:50, y:30, x2:30, y2:30, }, xAxis: [ { type: 'time', axisTick:{ show:false }, axisLine:{ lineStyle:{ color:'#dfdfdf', width:1, } }, splitLine:{ lineStyle:{ color:'#dfdfdf', } }, axisLabel:{ formatter:function (value) { return echarts.format.formatTime('hh:mm:ss', new Date(value)); }, margin:12 } } ], yAxis: [ { type: 'value', axisTick:{ show:false }, axisLine:{ lineStyle:{ color:'#dfdfdf', width:1,//轴线宽度 } }, splitLine:{ lineStyle:{ type:'dashed',//轴线样式 color:'#dfdfdf', } }, axisLabel: { formatter: function(value){ return (value).toString() }, textStyle: { color: '#ccc' }, } } ], series: [] }, dashboardData:{}, pannelList:{ monitor:'监控', }, activeName:'monitor', } }, created(){ this.$nextTick(function () { this._getDashboardContainer() }) }, methods:{ _getDashboardContainer(){ let param='*****' getDashboardContainer(param).then(res => { this.dashboardData=res.data.data this.infoData=res.data.data.containerInfo for (let data in this.infoData){ if (this.infoData[data].toString()===undefined||this.infoData[data].toString()==='') { this.infoData[data]='-' } } this.dashForChart(this.dashboardData) }).catch(() => {}) }, getChartName(chart){ return chart }, dashForChart(dashData){ let cpuUsedCi = this.dashForCpuUsedCi(dashData.cpuUsedCi) setTimeout(function(){ window.onresize = function () { cpuUsedCi.resize() } },200) }, dashForCpuUsedCi(cpuUsedCiData){ let series = [],cpuUsedCi var data = cpuUsedCiData.current console.log(data) series.push({ name:'使用量', type: 'line', data: data, symbol: 'none', itemStyle : { normal : { lineStyle:{ color:'#2191ca', width:1 }, areaStyle:{ color:'#2191ca', opacity:0.1 } } } }) this.cpuUsedCiChartOption.series = series //初始化 cpuUsedCi = echarts.init(document.getElementById('_cpuUsedCiCharts')) cpuUsedCi.setOption(this.cpuUsedCiChartOption) return cpuUsedCi }, }, } </script>
echarts + vue 使用
最新推荐文章于 2024-05-19 21:35:36 发布