Vue实现ECharts柱状图数据轮播（自动分页加载）

vue

 <div id="main"></div>```

import echarts from './echarts'
export default {data() {return {curPage: 1,totalPage: 1,itemNumPerPage: 1,//每页显示条数，自己调整dataList :{xData:["测试1","测试2"],yData:[20,30]}}}mounted() {this.myEcharts();let that=this;const timer = setInterval(() => {let curPage=that.curPage==that.totalPage?1:that.curPage+1;that.curPage=curPage;that.myEcharts();}, 5000)//设置时间//销毁定时器this.$once('hook:beforeDestroy', () => {clearInterval(timer)})}, methods: {myEcharts() {this.totalPage = Math.ceil(this.dataList / this.itemNumPerPage)this.totalPage = this.totalPage < 1 ? 1 : this.totalPage;let chartDom = document.getElementById("main");let myChart = echarts.init(chartDom);let option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},//图列legend: {data:["测试"]},//x轴xAxis: {type: 'category',data: this.getCurPageContent(this.dataList.xData,this.curPage,this.itemNumPerPage),},yAxis: {type: 'value',},series: [{name: "测试",type: 'bar',stack: 'Total',data:  this.dataList.yData,}],};option && myChart.setOption(option);
},getCurPageContent: function (numberArr, curPage, itemNumPerPage) {return numberArr.filter(function (element, index) {if (index >= (curPage - 1) * itemNumPerPage && index < curPage * itemNumPerPage) {return true} else {return false}})},
}

Vue实现ECharts柱状图数据轮播（自动分页加载）相关推荐

Vue根据菜单json数据动态按需加载路由Vue-router
每个菜单项对应一个页面组件,根据菜单项动态按需加载路由路由配置的正确写法: /*router/index.js*/ import Vue from 'vue' import Router from ...
vue页面切换动画-类似于轮播效果、渲染列表给每一行数据加上显示动画
vue页面切换动画-类似于轮播效果 <transition :name="transitionName"><router-view/> </trans ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
Vue使用Echarts实现数据可视化
Vue使用Echarts实现数据可视化一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Ech ...
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...
vue项目Echarts更新数据是数据表展示错版
vue项目Echarts更新数据是数据表展示错版当我们第一次渲染数据的时候,echarts渲染是正常的,但是当我们的数据更新的时候,展示的图表会出现错版现象,其中最常见的是曲线图. 比如下面,刚开始 ...
Vue 组件封装之 Carousel 轮播图
Vue 组件封装之 Carousel 轮播图一.Carousel 轮播图组件二.使用案例三.API 使用指南四.源代码一.Carousel 轮播图组件组件说明: 实现无缝轮播. 效果展示: ...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点先看效果图我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...
vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...

Vue实现ECharts柱状图数据轮播（自动分页加载）

Vue实现ECharts柱状图数据轮播（自动分页加载）

Vue实现ECharts柱状图数据轮播（自动分页加载）相关推荐

最新文章

热门文章