Maison > interface Web > js tutoriel > Implémentez la fonction top en utilisant vue2-highcharts dans Vue (tutoriel détaillé)

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

亚连
Libérer: 2018-06-01 14:27:23
original
2003 Les gens l'ont consulté

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
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal