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构造函数详解
Dec 27 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 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
smarty中常用方法实例总结
2015/08/07 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
JavaScript函数详解
2015/02/27 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
python中学习K-Means和图片压缩
2017/11/20 Python
深入理解Python3 内置函数大全
2017/11/23 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
java判断三位数的实例讲解
2019/06/10 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
学习和使用python的13个理由
2019/07/30 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python实现简单银行管理系统
2019/10/25 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
软件测试英文面试题
2012/10/14 面试题
书法大赛策划方案
2014/06/04 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
初中语文教师研修日志
2015/11/13 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
Python re.sub 反向引用的实现
2021/07/07 Python
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技