Heim  >  Artikel  >  Web-Frontend  >  Implementieren Sie die Top-Funktion mithilfe von vue2-highcharts in Vue (ausführliches Tutorial).

Implementieren Sie die Top-Funktion mithilfe von vue2-highcharts in Vue (ausführliches Tutorial).

亚连
亚连Original
2018-06-01 14:27:231971Durchsuche

Jetzt werde ich Ihnen ein Beispiel für die Verwendung von vue2-highcharts zur Implementierung der Top-Funktion in Vue vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

1. Der zu erzielende Effekt ist wie folgt:

2. Zunächst referenziert das Projekt vue2-highcharts

package.json wie folgt:

Geben Sie in die Befehlszeile ein:

cnpm install vue2-highcharts

3. Der Seitencode lautet wie folgt:

<template>
 <p >
  <p>
  <p id="transparent-header" class="rank-head container" >
    <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/>
    <span >用能排名</span>
  </p>
  </p>
  <p >
   <p >
    <datepicker v-on:picked="picked" style="margin-left:10px;"></datepicker>
   </p>
    <p >
    </p>
  </p>
  <p >
   <p class="charts">
     <vue-highcharts :options="options" ref="maxLineCharts"></vue-highcharts>
   </p>
  </p>
  <p >
   <p class="charts">
     <vue-highcharts :options="options" ref="minLineCharts"></vue-highcharts>
   </p>
  </p>
 </p>
</template>
<script>
 import datepicker from &#39;../components/datepicker.vue&#39;
 import VueHighcharts from &#39;vue2-highcharts&#39;
 export default {
 data() {
  return{
   topHeight:240,
   freezeMon:&#39;&#39;,
   ownerFreeData: [],
   options:{
    credits: {
     enabled: false
    },
    legend: {
     enabled: false
    },
    global: {
     useUTC: false
    },
    chart: {
     type: &#39;bar&#39;
    },
    title: {
     text: &#39; &#39;
    },
    subtitle: {
     text: &#39;&#39;
    },
    xAxis:[{
     categories: [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;,&#39;6&#39;, &#39;7&#39;, &#39;8&#39;, &#39;9&#39;, &#39;10&#39;],
     title: {
      text: null
     },
    labels: {
     rotation: -45
    }
     }],
    yAxis:[{
      min: 0,
      labels:{
       overflow: &#39;justify&#39;
      },
      title: {
       text: &#39;单位 (kwh)&#39;,
       align: &#39;high&#39;
       }
    }],
    tooltip: {
      formatter: function(){
      return this.x+&#39;:&#39;+this.y+&#39;kwh&#39;;
     }
    },
    credits: {
     enabled: false
    },
    plotOptions: {
     bar: {
      dataLabels: {
       enabled: true
      }
     },
    series: [{
     type: &#39;bar&#39;
    }]
    }
   }
  }
 },
  methods: {
  picked(year, month, date) {
   if(month < 10){
    this.freezeMon = `${year}-0${month}`;
   }else{
    this.freezeMon = `${year}-${month}`;
   }
   this.getList();
  },
  routerBack(){
   this.$router.go(-1);
  },
  getList(){
   let maxLineCharts = this.$refs.maxLineCharts;
   let minLineCharts = this.$refs.minLineCharts;
   if(maxLineCharts != null && minLineCharts != null){
    //移除所有Series
    maxLineCharts.removeSeries();
    minLineCharts.removeSeries();
//设置标题名 
   maxLineCharts.getChart().title.update({ text: &#39;用能最大TOP10&#39; });
    minLineCharts.getChart().title.update({ text: &#39;用能最小TOP10&#39; });
    var userType = sessionStorage.getItem(&#39;userType&#39;);
    var areaCode = sessionStorage.getItem(&#39;areaCode&#39;);
    this.$http.post(this.URLINFO + &#39;/mobile/rankingMonitor/getDayFreezeApp.do&#39;,{yearMonth:this.freezeMon,userType:userType,areaCode:areaCode})
    .then(function (res) {
      var seriesData = []
      var categoriesData = []
      for(var i = 0;i < res.data.max.length; i++) {
        //maxLineCharts.addSeries({name:res.data.max[i][1],data: [{name: res.data.max[i][1],y:res.data.max[i][2]}]});
        seriesData.push([res.data.max[i][1],res.data.max[i][2]]);
        categoriesData.push(res.data.max[i][1]);
      }
      maxLineCharts.addSeries({name: &#39;用能&#39;,data: seriesData});
      maxLineCharts.getChart().xAxis[0].setCategories(categoriesData);
      seriesData = []
      categoriesData = []
      for(var i = 0;i < res.data.min.length; i++) {
        //minLineCharts.addSeries({name:res.data.min[i][1],data: [{name: res.data.min[i][1],y:res.data.min[i][2]}]});
        seriesData.push([res.data.min[i][1],res.data.min[i][2]]);
        categoriesData.push(res.data.min[i][1]);
      }
      minLineCharts.addSeries({name: &#39;用能&#39;,data: seriesData});
      minLineCharts.getChart().xAxis[0].setCategories(categoriesData);
    })
    .catch(function (error) {
      this.$toast(&#39;查询排名信息异常&#39;);
    });
   }
  }
  },
 components: {
   datepicker,
  VueHighcharts
  },
 mounted () {
  this.getList()
 }
 }
</script>
<style>
*{margin:0;padding:0; list-style:none }
h1,h2,h3,h4,h5,h6{font-size:16px; font-weight:normal;}
.rank-head{
  width: 100%;
  height: 40px;
  position:fixed;
  background: -webkit-linear-gradient(top,rgba(0,0,0,.6),rgba(0,0,0,0));
  z-index: 999;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}
.container{
  width: 100%;
  overflow: hidden
}
.rank-head-back{
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  background: url("../assets/index/back.png") no-repeat center center;
  background-size: 100% 100%;
}
</style>

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Erst Daten anfordern und dann Dom-Sharing in Vue rendern

Lösung für das Problem dieser Vue-Seite Der DOM-Vorgang wird nicht wirksam. Frage

Nodejs implementiert eine supereinfache Methode zum Generieren von QR-Code

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Top-Funktion mithilfe von vue2-highcharts in Vue (ausführliches Tutorial).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn