Implement the top function by using vue2-highcharts in Vue (detailed tutorial)-JS Tutorial-php.cn

Implement the top function by using vue2-highcharts in Vue (detailed tutorial)

亚连

Release： 2018-06-01 14:27:23

Original

1997 people have browsed it

Below I will share with you an example of using vue2-highcharts to implement the top function in Vue. It has a good reference value and I hope it will be helpful to everyone.

1. The effect to be achieved is as follows:

2. First, the project references vue2-highcharts

package.json as follows:

Enter in the command line:

cnpm install vue2-highcharts

Copy after login

3. The page code is as follows:

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Request data first and then render dom sharing in vue

Solution to vue page DOM operation not taking effect Question

Nodejs implements a super simple method of generating QR codes

The above is the detailed content of Implement the top function by using vue2-highcharts in Vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!