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


Posted in Javascript onMarch 05, 2018

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

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

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

package.json中如下:

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

在命令行中输入:

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功能的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
js编写简易的计算器
Jul 29 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 #Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 #Javascript
vue项目中使用ueditor的实例讲解
Mar 05 #Javascript
快速处理vue渲染前的显示问题
Mar 05 #Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 #Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 #Javascript
AjaxUpLoad.js实现文件上传
Mar 05 #Javascript
You might like
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
简单学习Python time模块
2016/04/29 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python Django基础二之URL路由系统
2019/07/18 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
班主任经验交流会主持词
2014/04/01 职场文书
转让协议书范本
2014/04/15 职场文书
煤矿安全生产标语
2014/06/06 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
离婚协议书样本
2015/01/26 职场文书
立项申请报告范本
2015/05/15 职场文书
房产电话营销开场白
2015/05/29 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
PHP正则表达式之RCEService回溯
2022/04/11 PHP