Vue 中使用vue2-highcharts实现top功能的示例

1、要实现的效果如下图：

2、首先项目中引用vue2-highcharts

package.json中如下：

在命令行中输入：

cnpm install vue2-highcharts

3、页面代码如下：

<template>
 <div >
 <div>
 <div id="transparent-header" class="rank-head container" >
 <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/>
 <span >用能排名</span>
 </div>
 </div>
 <div >
 <div >
 <datepicker v-on:picked="picked" style="margin-left:10px;"></datepicker>
 </div>
 <div >
 </div>
 </div>
 <div >
 <div class="charts">
 <vue-highcharts :options="options" ref="maxLineCharts"></vue-highcharts>
 </div>
 </div>
 <div >
 <div class="charts">
 <vue-highcharts :options="options" ref="minLineCharts"></vue-highcharts>
 </div>
 </div>
 </div>
</template>
<script>
 import datepicker from '../components/datepicker.vue'
 import VueHighcharts from 'vue2-highcharts'
 export default {
 data() {
 return{
 topHeight:240,
 freezeMon:'',
 ownerFreeData: [],
 options:{
 credits: {
 enabled: false
 },
 legend: {
 enabled: false
 },
 global: {
 useUTC: false
 },
 chart: {
 type: 'bar'
 },
 title: {
 text: ' '
 },
 subtitle: {
 text: ''
 },
 xAxis:[{
 categories: ['1', '2', '3', '4', '5','6', '7', '8', '9', '10'],
 title: {
 text: null
 },
 labels: {
 rotation: -45
 }
 }],
 yAxis:[{
 min: 0,
 labels:{
 overflow: 'justify'
 },
 title: {
 text: '单位 (kwh)',
 align: 'high'
 }
 }],
 tooltip: {
 formatter: function(){
 return this.x+':'+this.y+'kwh';
 }
 },
 credits: {
 enabled: false
 },
 plotOptions: {
 bar: {
 dataLabels: {
 enabled: true
 }
 },
 series: [{
 type: 'bar'
 }]
 }
 }
 }
 },
 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: '用能最大TOP10' });
 minLineCharts.getChart().title.update({ text: '用能最小TOP10' });
 var userType = sessionStorage.getItem('userType');
 var areaCode = sessionStorage.getItem('areaCode');
 this.$http.post(this.URLINFO + '/mobile/rankingMonitor/getDayFreezeApp.do',{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: '用能',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: '用能',data: seriesData});
 minLineCharts.getChart().xAxis[0].setCategories(categoriesData);
 })
 .catch(function (error) {
 this.$toast('查询排名信息异常');
 });
 }
 }
 },
 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 中使用vue2-highcharts实现top功能的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。