echarts + vue 使用_weixin_42127141的博客-程序员宝宝

技术标签: echarts  vue  

<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>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42127141/article/details/102502111

智能推荐

spring Mongodb查询索引报错 java.lang.NumberFormatException: empty String_weixin_30911809的博客-程序员宝宝

最近事情比较多,本篇文章算是把遇到的问题杂糅到一起了。背景:笔者最近在写一个mongo查询小程序,由于建立索引时字段名用大写,而查询的时候用小写。代码如下:db.getCollection("xxx.aa").find({second_email:"/^[email protected]/"})1200万的数据,第一次执行耗时:43.741秒,这在正式环境肯定是不允许...

【深度学习】Tensorflow报错:tf.placeholder() is not compatible with eager execution._何为xl的博客-程序员宝宝

@[TOC](【深度学习】Tensorflow报错:tf.placeholder() is not compatible with eager execution.)转载博客:https://blog.csdn.net/weixin_43763859/article/details/104537392最近安装了TensoFlow2.0及以上的版本都发现啊出现这个问题:RuntimeError: tf.placeholder() is not compatible with eager executi

通过java实现上传文件到hadoop_爱人间的博客-程序员宝宝_java上传文件到hadoop

(1)首先创建java project选择eclipse菜单上File->New->Java Project。并命名为UploadFile。(2)添加必要的hadoop jar包右键选择JRE System Library,选择Build Path下的Configure Build Path。然后选择Add External Jars

angulrjs 中 ui router 菜单二次点击时刷新的解决方案_lizhen_software的博客-程序员宝宝

在ui-sref 的 元素上增加如下点击事件:$scope.urlClick = function (event,navInfo) { var navUrl = window.location.href.split('#')||''; var hrefUrl = '1'; if(event.target){ hrefUrl = decodeURIComponent(event.target.getAttribute('href').replace('#','')

用asp如何开发wap push(转)_cuankuangzhong6373的博客-程序员宝宝

对于WAP PUSH服务,CP/SP需要向中国联通申请该类服务,并且CP/SP所提供的WAP PUSH内容所在的服务器能够与中国联通的 Openwave PUSH Server连通,连接方式分为内网连接和公网连接两种方式,由CP...

docker centos redis 基础常用命令_RT_0114的博客-程序员宝宝

镜像的获取与容器的使用镜像可以看作是包含有某些软件的容器系统,比如centos就是一个官方的基础镜像,很多镜像都是基于这个镜像“衍生”,该镜像包含基本的centos系统(1)搜索可用的centos的docker镜像  docker search :在docker index中搜索image  docker search centos这样就可以搜索出在Do

随便推点

Flynn--计算机体系结构分类_举世无双勇的博客-程序员宝宝

体系结构类型分成单指令流单数据流 SISD(single instruction single data)结构:控制部分1个 处理器1个 主存模块1个关键特性:暂无代表:单处理器系统 单片机 386 486 586(奔腾)多指令流单数据流 MISD(multiple instruction single data)结构:控制部分多个 处理器一个 主存模块多个关键特性:被证实为不可实现...

Codeforces Round #321 (Div. 2) 580C Kefa and Park(dfs)_GKHack的博客-程序员宝宝

题目链接:第一行给你n、m,接下来的一行有n个数,如果为1则代表这个点有cat,接下来的n-1行每行给出x、y,表示x、y相连。问你从1出发能到达的叶子结点有几个,要求到达叶子结点的路上连续有cat的点不超过m。a数组保存结点是否含有cat,从1这个点开始dfs,每次dfs对cat数组操作,记录连续的含有cat的点数,回溯时再判断当前结点是否满足条件,要求结点为叶子

Google Daydream Labs 已经用 ARCore 做了什么?_唐门教主的博客-程序员宝宝

ARCore 为数百万 Android 手机带来了增强现实功能,很多开发者已开始尝试使用其软件工具开发包(SDK)以及 Unity、Unreal 等进行创作。目前 Google Daydream Labs 已经在此进行了多项相关的实验,来研究人们探索世界的独特方式、不同的导览形式和人们利用相关应用进行社交和娱乐的新方法。接下来,让我们一起来看看用 ARCore 都能做些什么。AR 变身 Googl...

IOS9获取HTML数据报错解决_qqyadf的博客-程序员宝宝

NSURL *url = [NSURLURLWithString:urlPath];NSError *error = [[NSErroralloc]init];[NSStringstringWithContentsOfURL:url encoding:NSUTF8StringEncodingerror:&error]error返回错误信息:Error Dom

浅谈几种基本的点估计方法及实例_止于至玄的博客-程序员宝宝_点估计应用案例

参数估计有两种形式:点估计与区间估计。本文选择几种常用的点估计方法作一些讨论。用于估计未知参数的统计量称为点估计(量)。参数 θθ\theta 的估计量常用 θ^=θ^(x1,x2,…,xn)θ^=θ^(x1,x2,…,xn)\hat{\theta} = \hat{\theta}(x_{1},x_{2}, \dots, x_{n}) 表示,参数 θθ\theta 的可能取值范围称为参数空间,记...

Vue first project_weixin_40728070的博客-程序员宝宝

cmd 中输入vue create 项目名,创建一个项目(你要在哪个目录下创建,先跳到该目录,要不然直接在c/dht/下)。用vscode开发安装 npm, eslient(代码格式化), vetur插件。根目录下各文件的作用node_modules:用项目开发用的依赖public:下index.html网页入口src:下assets 图片等资源 components 组件默认有一个组件App.vue 所有页面的入口因为程序是单页面,从这里进入所有页面main.j...