基于axios请求接口获取数据，封装APEXCHARTS

在 博客 的基础上，对页面的axios请求获取的数据进行封装

csLine.vue

<template>
    <myCharts
      :interval="time"
      :url="urlData"
      :config="config"
      :height="height"
      ></myCharts>
</template>

<script>
import myCharts from './myCharts'
import { getIncMigrations } from '../../scripts/api'

export default {
  name: 'index',
  data () {
    return {
      time: 0, // 必填
      config: { // 放一些对应的配置文件，官方option中的一些属性设置
        chart: {
          type: 'area', // // 图表类型：line、area、bar、radar等，默认是光滑的line
          toolbar: { show: false }
        },
      }, // 选填
      height: '350px', // 选填; 默认高度是350px
      // urlData: [], // 格式为[ { "name": "pub26", "data": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] } ]
      urlData: '/jdts/_baseAPI/jdtsAPI/jdts/getJobSpeedIndicator/701', // 这里需要环境中请求的完整接口，而且返回的数据格式为{"pub26":[0,0,0,0,0,0,0,0,0,0]}
    }
  },
  methods: {
    async getChartData () { // 获取数据的接口函数，请用getChartData()
      const res = await getIncMigrations(701)
      const { success, data } = res.data
      if (success) {
        const list = data // 四个折线图的值
        const tem = []
        tem.push({
          name: 'cs',
          data: list[1].avgDelay
        })
        // this.handleMList(list)
        // let tem = []
        // for (const key in list) {
        //   tem.push({
        //     name: key,
        //     data: list[key]
        //   })
        // }
        this.urlData = tem
        return tem
      }

    //   let series = []
    //   for (let i = 0; i < 3; i++) {
    //     const obj = {
    //       name: 'series' + i,
    //       data: []
    //     }
    //     for (let j = 0; j < 7; j++) {
    //       const newData1 = Math.floor(Math.random() * 1000)
    //       obj.data.push(newData1)
    //     }
    //     series.push(obj)
    //   }
    //   this.urlData = series
    //   return series
    }
  },
  created() {
    // this.getChartData()
  },
  components: {
    myCharts
  }
}
</script>

<style scoped>

</style>

mychart.vue

<template>
  <div>
    {{series}}
    <vue-apex-charts :height="currentHeight" :options="chartOptions" :series="series" ></vue-apex-charts>
  </div>
</template>
<script>
import VueApexCharts from 'vue-apexcharts'
import axios from 'axios'
let timerId = null
export default {
  name: 'myCharts',
  props: ['interval', 'url', 'config', 'height', 'params'],
  data() {
    return {
      currentHeight: this.height ? this.height : '350px',
      seriesList: [],
      selectedList: [],
      series: [],
      chartOptions: {
        chart: {
          type: 'line'
        },
        dataLabels: {
          enabled: false // 启用数据标签，即是否直接在图标上显示数据
        },
        fill: {},
        grid: {}, // 显示或隐藏网格区域（包括X轴/Y轴）
        labels: [], // 在轴图表（行/列）中，可以设置标签，而不是设置X轴类别选项。而在饼图/甜甜圈图中，每个标签对应于序列数组中的值。
        legend: {
          show: true,
          position: 'bottom', // 小圆点显示的位置，默认是bottom
          width: 'auto',
          markers: {
            radius: 12
          }
        },
        noData: {},
        plotOptions: {},
        stroke: {
          show: true,
          curve: 'smooth',
          width: 2
        }, // 在折线图/面积图中，是绘制平滑线还是直线可用选项
        subtitle: {}, // 副标题
        title: {},
        tooltip: {},
        xaxis: {},
        yAxis: {
          tickAmount: 5 // 要显示的刻度间隔数
        }
      }
    }
  },
  methods: {
    // 设置通用参数
    setCommon() {
      if (this.config) {
        for (const key1 in this.config) {
          for (const key2 in this.chartOptions) {
            if (key1 === key2) {
              this.chartOptions[key2] = this.config[key1]
            }
          }
        }
      }
    },
    init() {
      const _this = this
      this.setCommon()
      if (_this.interval > 0) {
        timerId = setInterval(() => {
          _this.updateChart()
        }, 1000 * _this.interval)
      }else {
        _this.updateChart()
      }
    },
    updateChart() {
      // 这里应该调csLine中的getData()函数，获取最新的urlData
      if (this.url.constructor === Array) {
        // 1.  :url="urlData",其中urlData的初始化为[]  --> 直接把这个值赋值给this.series
        // this.series = this.$parent.getChartData()
        this.$parent.getChartData().then(res=>{
          this.url = res
        })
      } else {
        // 2. :url="'/demo/charts/configLinebar'"    -->  底层调用接口获取数据，再赋值给this.series
        // const getAllMetaTable = (params) =s> axios.get(prefix + '/jdts/getMetaTransportMapConfig', { params }).then(res=>{return res.info})
        const tem = []
        axios.get(this.url).then(res => { 
          const { success, data } = res.data
          if (success) {
            const list = data // 折线图的值
            const tem = []
            for (const key in list) {
              tem.push({
                name: key,
                data: list[key]
              })
            }
            this.series = tem
          } else {
            this.$Message.error(data.message)
          }
        })
      }
    }
  },
  created() {
    this.init()
  },
  watch: {
    url: {
      handler (val) {
        this.series = val
      }
    },
    deep: true
  },
  components: {
    VueApexCharts
  },
  beforeDestroy () {
    if (timerId) {
      clearInterval(timerId)
      timerId = null
    }
  }
}
</script>