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>