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 ...
随机推荐
- 从“13天”到“0天”延时,揭秘幸福里离线SLA保障最佳实践
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 "幸福里"是抖音集团旗下集内容.社区.工具于一体的房产媒体综合信息平台,致力于提供多样化 ...
- Nacos 1.2.1 集群搭建(三) Nginx 配置 集群
配置 Nginx 可以把.conf 文件拉到本地,配置好再传上去 #gzip on; upstream cluster{ server 192.168.0.113:8848; server 192.1 ...
- WebApi 接口请求耗时记录
.Net Core NLog 配置 通过日志,记录每个接口请求的耗时情况 结合 <logger name="*" level="Trace" write ...
- ubuntu下完全卸载重装docker教程
操作需在管理员权限下运行 卸载docker 1.删除docker的所有包 apt-get autoremove docker docker-ce docker-engine docker.io con ...
- Axure RP 9 下载、破解激活教程、最新激活码,亲测可用
本教程适用于 Axure RP 9 Enterprise/Pro/Team 的激活.破解,最新激活码,适用于 windows, mac系统,仅用于学习 简介 Axure RP 9.0 破解版是一款功能 ...
- Spring Boot 2.x基础教程:使用LDAP来管理用户与组织数据
很多时候,我们在做公司系统或产品时,都需要自己创建用户管理体系,这对于开发人员来说并不是什么难事,但是当我们需要维护多个不同系统并且相同用户跨系统使用的情况下,如果每个系统维护自己的用户信息,那么此时 ...
- 详解 Serverless 架构的 6 大应用场景
导读 Serverless 架构将成为未来云计算领域重要的技术架构,将会被更多的业务所采纳.进一步深究,Serverless 架构在什么场景下有优秀的表现,在什么场景下可能表现得并不是很理想呢?或者说 ...
- kafka集群五、__consumer_offsets副本数修改
系列导航 一.kafka搭建-单机版 二.kafka搭建-集群搭建 三.kafka集群增加密码验证 四.kafka集群权限增加ACL 五.kafka集群__consumer_offsets副本数修改 ...
- RLHF · PbRL | 速通 ICLR 2024 RLHF
检索关键词:ICLR 2024.reinforcement learning.preference.human feedback. https://openreview.net/search?term ...
- influxdb 端点使用http进行sql查询,写数据
转载请注明出处: InfluxDB有以下几个常用的端点,它们的作用和传参方式如下: 1./ping 端点: 作用:用于检查InfluxDB实例的状态,返回InfluxDB的构建类型和版本信息. 传参: ...