echarts做折线图

先给大家看图

父组件

     <el-container v-show="abscissa">

        <lineEchart

          :CPUInfoList="CPUTotalUsage"

          :Timer="Timer"

          :abscissa="abscissa"

          :ordinate="ordinate"

          :title="title[0]"

          :titleList="titleList[0]"

          :unit="unit[0]"

        ></lineEchart>

      </el-container>

  components: {

　　　　lineEchart

  },
上面是DOM和组件注册
   　　CPUTotalUsage: '',
  　　Timer: '',
  　　abscissa: [],
       // 折线纵轴单位
      unit: ['%', 'Mbps'],
      // 折线title
      title: ['教师端系统指标', '其他指标', 'TOP5进程占用-CPU', 'TOP5进程占用-内存'],
　　　　ordinate: [],
上面这些是data里面定义的数据 下面是请求到的数据

.then(res => {

        if (res.Status == 1) {

          this.dataList = res.Content

          if (this.dataList) {

            this.dataList.forEach(item => {

              if (item.Datetime == this.Timer) {

                this.CPUTotalUsage = item.CPUProcessUsage

              }

              this.abscissa.push(item.Datetime)

              this.ordinateList.CPUTotalUsage.push(item.CPUTotalUsage)

              this.ordinateList.CPUProcessUsage.push(item.CPUProcessUsage)

              this.ordinateList.MemTotalUsage.push(item.MemTotalUsage)

              this.ordinateList.MemProcessUsage.push(item.MemProcessUsage)

              this.ordinateList.GPUTotalUsage.push(item.GPUTotalUsage)

              this.ordinateList.GPUMemUsage.push(item.GPUMemUsage)

              this.ordinateList.FPS.push(item.FPS)

              this.ordinateList.NetworkRecvSpeed.push(item.NetworkRecvSpeed)

              this.ordinateList.NetworkSendSpeed.push(item.NetworkSendSpeed)

            })

            this.ordinate = [

              {

                name: '系统CPU总占用',

                data: this.ordinateList.CPUTotalUsage

              },

              {

                name: '应用CPU占用',

                data: this.ordinateList.CPUProcessUsage

              },

              {

                name: '系统内存总占用',

                data: this.ordinateList.MemTotalUsage

              },

              {

                name: '应用内存占用',

                data: this.ordinateList.MemProcessUsage

              },

              {

                name: '系统GPU总占用',

                data: this.ordinateList.GPUTotalUsage

              },

              {

                name: '系统显存总占用',

                data: this.ordinateList.GPUMemUsage

              }

            ]

          } else {

            this.loading = false

            this.showFlag = false

          }

        } else {

          this.showFlag = false

          this.$message({

            message: res.Msg,

            type: 'error'

          })

        }

      })

我们看下返回的数据都是什么

这是整个接口的返回  我们就取一些数据

这个就是子组件echarts的组件实例

<template>

  <div class="echarts" ref="echarts"></div>

</template>

<script>

import echarts from 'echarts'

import wonderland from './echarts'

export default {

  props: {

    abscissa: {

      type: Array,

      default: () => []

    },

    ordinate: {

      type: Array,

      default: () => []

    },

    title: String,

    titleList: {

      type: Array,

      default: () => []

    },

    unit: String,

    Timer: String,

    CPUInfoList: String

  },

  data() {

    return {

      chart: null,

      myChart: null,

      option: {},

      lineList: []

    }

  },

  mounted() {},

  watch: {

    abscissa(newV, oldV) {

      this.draw()

    }

  },

  methods: {

    draw() {

      this.chart = this.$refs.echarts

      this.chart.style.width = document.documentElement.clientWidth - 200 + 'px'

      this.chart.style.height = 300 + 'px'

      echarts.init(this.chart, 'wonderland').dispose()

      echarts.registerTheme('wonderland', wonderland)

      this.myChart = echarts.init(this.chart, 'wonderland')

      this.option = {

        title: {

          text: this.title

        },

        tooltip: {

          trigger: 'axis',

          axisPointer: {

            type: 'cross'

          }

        },

        legend: {

          data: this.titleList

        },

        toolbox: {

          feature: {}

        },

        grid: {

          left: '5%',

          right: '4%',

          bottom: '10%',

          containLabel: false

        },

        xAxis: [

          {

            type: 'category',

            boundaryGap: false,

            data: this.abscissa

          }

        ],

        yAxis: [

          {

            type: 'value',

            axisLabel: {

              formatter: '{value}' + this.unit

            }

          }

        ],

        dataZoom: [

          {

            type: 'slider',

            show: true,

            xAxisIndex: [0],

            start: 0,

            end: 100

          },

          {

            type: 'inside',

            xAxisIndex: [0],

            start: 0,

            end: 100

          }

        ],

        series: []

      }

      var this_ = this

      echarts.util.each(this.ordinate, function(item, index) {

        this_.option.series.push({

          name: item.name,

          type: 'line',

          showSymbol: false,

          sampling: 'average',

          data: item.data,

          markPoint: {

            symbolSize: this_.CPUInfoList ? 60 : 0,

            data: [

              {

                name: '某个坐标',

                yAxis: this_.CPUInfoList,

                xAxis: this_.Timer,

                value: '崩溃点'

              }

            ]

          }

        })

      })

      this.myChart.setOption(this.option)

      this.myChart.group = '1'

      echarts.connect('1')

      window.addEventListener('resize', () => {

        this.myChart.resize()

      })

    }

  }

}

</script>

<style lang="scss" scoped>

.echarts {

  // width: 100%;

  height: 500px;

}

</style>