原文地址 https://www.xiegaosheng.com/post/view?id=86

主要的几个函数为getChart(),update(),setCategories(),addSeries();removeSeries();

通过ajax请求后台接口；效果如下图

<template>
  <div class="row">
      
        <div class="row">
            <div class="col-lg-12">
                <div class="col-lg-4">
                    <vue-highcharts :options="healthoption" ref="health"></vue-highcharts>
                </div>

                 <!--客户端明细-->
                <div class="col-lg-3">
                    <table class="table table-striped">
                      <caption>ap状态</caption>
                      <thead>
                        <tr>
                          <th>  AP NAME</th>
                          <th>clients</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="apstatusdata in apstatusdatas">
                          <td>{{apstatusdata.name}}</td>
                          <td>{{apstatusdata.count}}</td>
                        </tr>

                      </tbody>
                    </table>
                </div>

            </div>
        </div>

  </div>


</template>


<script>
import VueHighcharts from 'vue2-highcharts';
import {ApList,getHeader,health,ApStatus} from './../../config.js';

export default{
    components: {
        VueHighcharts
    },
    data(){
      return{
       
        healthoption: {
                  chart: {
                    type: 'column'
                  },
                  title: {
                    text: '客户端健康度'
                  },
                  subtitle: {
                    text: 'Source: WorldClimate.com'
                  },
                  xAxis: {
                    categories: []
                  },
                  yAxis: {
                    title: {
                      text: '终端数'
                    },
                    labels: {
                      formatter: function () {
                        return this.value + '°';
                      }
                    }
                  },
                  tooltip: {
                    crosshairs: true,
                    shared: true
                  },
                  credits: {
                    enabled: false
                  },
                  plotOptions: {
                    spline: {
                      marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                      }
                    }
                  },
                  series: []
                },
      
        apstatusdatas:{},
      }
    },
    mounted() {
            this.healthdata()
            this.getApstatusData()
    },
    methods: {
      
      //健康度
      healthdata(){

            this.$http.get(health, {
                headers: getHeader()
            })
            .then((response) => {
                if (response.body.code === '200') {
                    let tempdata = response.body.data;
                    let length = tempdata.length;

                    let tempcategories = [];
                    let tempseries = [];
                    for(let i=0;i<length;i++){
                        tempcategories.push(tempdata[i]['key']);
                        tempseries.push({'y':tempdata[i]['value'],'name':tempdata[i]['key']+'%'});
                    }
                    this.healthoption.xAxis.categories = tempcategories;
                    let health = this.$refs.health;
                    health.getChart().title.update({ text: '客户端健康度' });
                    health.getChart().xAxis[0].setCategories(tempcategories);
                    let data = {

                              name: '终端数',
                              marker: {
                                symbol: 'column'
                              },
                              data: tempseries
                            }
                     // health.removeSeries();清除图表
                      health.delegateMethod('showLoading', 'Loading...');
                      health.addSeries(data);
                      health.hideLoading();
                }
            })
            .catch(function(response) {
                //console.log(response)
            })

      },
       getApstatusData(){
            this.$http.get(ApStatus, {
                headers: getHeader()
            })
            .then((response) => {
                if (response.body.code === '200') {
                    this.apstatusdatas = response.body.data;
                    console.log(response.body.data.client_count.count);
                }
            })
            .catch(function(response) {
                console.log(response)
            })
       },
    }
}
</script>