Vue에서 vue2-highcharts를 사용하여 최상위 기능 구현(자세한 튜토리얼)

이제 Vue에서 최상위 기능을 구현하기 위해 vue2-highcharts를 사용하는 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

1 달성할 효과는 다음과 같습니다.

2 먼저

package.json에서 다음과 같이 vue2-highcharts를 참조하세요.

명령줄 입력:

cnpm install vue2-highcharts

3. 페이지 코드는 다음과 같습니다.

<template>
 <p >
  <p>
  <p id="transparent-header" class="rank-head container" >
    <img  class="rank-head-back lazy"  src="/static/imghwm/default1.png"  data-src="../assets/index/back.png"    @click="routerBack"/ alt="Vue에서 vue2-highcharts를 사용하여 최상위 기능 구현(자세한 튜토리얼)" >
    <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>

위 내용은 모든 사람에게 도움이 되기를 바랍니다. 미래.

관련 기사:

먼저 데이터를 요청한 다음 vue에서 DOM 공유 렌더링

vue 페이지에서 DOM 작업이 작동하지 않는 문제 해결

nodejs는 QR 코드를 생성하는 매우 간단한 방법을 구현합니다.

위 내용은 Vue에서 vue2-highcharts를 사용하여 최상위 기능 구현(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!