下面我就为大家分享一篇vue 中使用vue2-highcharts实现top功能的示例，具有很好的参考价值，希望对大家有所帮助。
1、要实现的效果如下图：
2、首先项目中引用vue2-highcharts
package.json中如下：
在命令行中输入：
cnpm install vue2-highcharts
3、页面代码如下：
<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 '../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中实现先请求数据再渲染dom分享
解决vue页面dom操作不生效的问题
nodejs实现超简单生成二维码的方法
以上就是通过在vue中使用vue2-highcharts实现top功能（详细教程）的详细内容。