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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
深入理解vue中的$set
2017/06/01 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
使用python实现链表操作
2018/01/26 Python
python实现k-means聚类算法
2018/02/23 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python文件读取失败怎么处理
2020/06/23 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
各营销点岗位职责范本
2014/03/05 职场文书
小区推广策划方案
2014/06/06 职场文书
安全标兵事迹材料
2014/08/17 职场文书
2015年采购工作总结
2015/04/10 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
2019学校运动会开幕词
2019/05/13 职场文书