echarts轮训展示某个
//学校资产占比的配置
function schollAssets() {
var myChart = window.$echarts.init(
document.getElementById('schollproportion')
)
var index = 0
var preindex = 0
function fun() {
secondData.timerSet = setInterval(function () {
// // 显示提示框,如果后期需要可以
// myChart.dispatchAction({
// type: 'showTip',
// seriesIndex: 0,
// dataIndex: index,
// })
// 取消高亮指定的数据图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: preindex,
})
// 让图像凸出来
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index,
})
// 视图赋值,展示当前显示的是那一个
if (
secondData.schollZhan &&
secondData.schollZhan[index] &&
secondData.schollZhan[index].value
) {
secondData.assestNumPro = secondData.schollZhan[index].value
} else {
secondData.assestNumPro = 0
}
if (
secondData.schollZhan &&
secondData.schollZhan[index] &&
secondData.schollZhan[index].name
) {
secondData.assetsNamePro = secondData.schollZhan[index].name
} else {
secondData.assetsNamePro = ''
}
if (
secondData.schollZhan &&
secondData.schollZhan[index] &&
secondData.schollZhan[index].totalCount
) {
secondData.assetsProPercent =
(
(secondData.schollZhan[index].value /
secondData.schollZhan[index].totalCount) *
100
).toFixed(2) + '%'
} else {
secondData.assetsProPercent = '0%'
}
preindex = index
index++
if (index > secondData.schollZhan.length - 1) {
index = 0
}
}, 3000)
}
// 只有一条数据的的时候就不循环展示了
if (secondData.schollZhan.length > 1) {
fun()
}
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return (
params.marker +
params.name +
'<span style="display:inline-block;margin-right:8px;border-radius:10px;width:10px;height:10px;"></span>' +
params.value +
'个'
)
},
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
center: ['30%', '50%'],
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
formatter: function (arg) {
return arg.name + ':' + arg.percent + '%'
},
},
data: secondData.schollZhan,
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
// 第一次默认第一条数据高亮
myChart.dispatchAction({ type: 'highlight', dataIndex: index })
function showInfoNumBaifen(myorIndex) {
secondData.assestNumPro = secondData.schollZhan[myorIndex].value //资产数量
secondData.assetsProPercent =
(
(secondData.schollZhan[myorIndex].value /
secondData.schollZhan[myorIndex].totalCount) *
100
).toFixed(2) + '%' //占比
secondData.assetsNamePro = secondData.schollZhan[myorIndex].name //名称
}
// 最初一开始就展示第一个小板块的数据
showInfoNumBaifen(0)
// 点击的时候,让某一个图案高亮,右侧显示对应的信息数据
myChart.on('click', function (param) {
myChart.dispatchAction({ type: 'downplay', dataIndex: preindex })
myChart.dispatchAction({
type: 'highlight',
dataIndex: param.dataIndex,
})
// 循环下一次的小板块
preindex = param.dataIndex
index = param.dataIndex
// 点击的哪一个展示哪一个
showInfoNumBaifen(param.dataIndex)
})
}
return { overviewLeftassets, schollAssets }
}
echarts轮训展示某个的更多相关文章
- Echarts地图展示及属性分析
Echarts,一个效果非常棒的可视化库,可以生产各种图表,动态展示,附上官方网址:http://www.echartsjs.com/index.html 之前带本科实习时有同学用过,狗哥的博客也用这 ...
- ODOO引用Echarts数据展示
作为一个后端开发,首先想到的是将需要的数据进行处理反馈给前端. 具体如下: 然后就是专门的echarts模块(我这样写主要是因为echarts会用到的地方比较多,后续直接调用) 1. 2.echart ...
- vue学习【一】vue引用封装echarts并展示多个echarts图表
大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...
- 假期学习【十】首都之窗百姓信件JavaWweb+Echarts图表展示
今天主要对昨天爬取的数据进行处理,处理后用Echart图表展示, 效果如下:
- react使用echarts地图实现中国地图大区展示
日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...
- 使用echarts展示线状图信息的时候数据部分数据因为x轴的数据显示不全而隐藏的问题
在使用echarts来展示数据时,因为数据很多的原因导致x轴显示不全,然后有些数据也隐藏在图表中,所以这个时候我们要在 series 中设置一个属性,让所有的数据都能够展示出来,这里我们需要添加的属性 ...
- echarts 地图 动态 展示 结合css+js
echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...
- 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能
什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...
- Echarts在JavaWeb中与后台的交互实现
本Web系统后台框架是:Spring+SpringMVC+Mybatis+Shiro+Maven.完整系统搭建的配置过程见上一篇文章:基于Spring+SpringMVC+Mybatis的Web系统搭 ...
- 使用Echarts实现动态曲线图表
最近做的一个在线气象观测网站要实现一个需求:使用图表展示最近五天温湿度等气象要素的曲线变化 具体效果参考:http://www.weatherobserve.com/showInfoIndex.jsp ...
随机推荐
- 一文带你了解什么是GitOps
摘要:说起GitOps,可能很多朋友马上会联想到DevOps,那么GitOps和DevOps之间有什么关系.又有什么区别呢? 本文分享自华为云社区<浅谈GitOps>,作者: 敏捷的小智. ...
- 总结vue3 的一些知识点:MySQL 排序
MySQL 排序 我们知道从 MySQL 表中使用 SQL SELECT 语句来读取数据. 如果我们需要对读取的数据进行排序,我们就可以使用 MySQL 的 ORDER BY 子句来设定你想按哪个字段 ...
- MySQL 恢复误删除数据
如图:我们将删除 id=2的数据,并恢复 SHOW BINARY LOGS; You are not using binary logging show binlog events in 'mysql ...
- 【主流技术】聊一聊 Redis 的基本结构和简单应用(一)
目录 前言 一.String 类型 二.List 类型 三.Hash 类型 四.Set 结构 五.Sort Set (Zset)结构 六.文章小结 前言 Redis 是目前互联网后端的热门中间件之一, ...
- 【flask】蓝图的使用方式 g对象的使用 flask配置数据库连接池
目录 上节回顾 今日内容 1 蓝图的使用 2 g对象 g对象 vs request对象 3 数据库连接池 上节回顾 全局request对象.线程会处理请求,确保线程中的数据不错乱. django_se ...
- @Scheduled cron 定时任务表达式含义,及* ?的区别
好多网友对@Scheduled cron表达式含义做了阐述,个人认为很多对于 * ?的说明不够具体也不算准确,借此本文特别对 * ?做一下说明. cron格式:[秒数][分钟][小时][日期][月份] ...
- C++右值引用与转移语义简要介绍
在 C++11 之前,值类型变量的传递会导致把它完整的拷贝一份 比如说把一个 vector 作为函数返回值赋值给某个局部变量,他就会调用 vector 的拷贝构造函数创建一个完整的副本,把这个副本作为 ...
- Java内部类详解--成员内部类,局部内部类,匿名内部类,静态内部类
一.内部类基础 在Java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类.广泛意义上的内部类一般来说包括这四种:成员内部类.局部内部类.匿名内部类和静态内部类.下面就先来了解一 ...
- 【收藏】制作艺术二维码,用 Stable Diffusion 就行!
[收藏]Stable Diffusion 制作光影文字效果 https://www.cnblogs.com/Serverless/p/17620406.html 基于函数计算FC 快捷部署 Stabl ...
- 【转载】内存基本概念-伙伴(Buddy)算法
简介 在Linux系统中,内存的分配与回收速率直接影响系统的存取效率.当内核频繁请求和释放不同大小的一组连续页框时,会导致许多外部空闲碎片,造成空间的浪费.使用伙伴算法可以有效地缓解该问题.伙伴关 ...