Implémentez la fonction top en utilisant vue2-highcharts dans Vue (tutoriel détaillé)

Maintenant, je vais partager avec vous un exemple d'utilisation de vue2-highcharts pour implémenter la fonction top dans Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

1. L'effet à obtenir est le suivant :

2. Tout d'abord, le projet fait référence à vue2-highcharts

package.json comme suit :

Entrez dans la ligne de commande :

cnpm install vue2-highcharts

3. Le code de la page est le suivant :

<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>

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Demande de données d'abord, puis rendu du partage dom dans vue

Solution au problème de la page Vue L'opération DOM ne prend pas effet Question

Nodejs implémente une méthode super simple de génération de code QR

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!