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 ...
随机推荐
- 4种Springboot RestTemplate 服务里发送HTTP请求用法
摘要: RestTemplate与REST资源交互的方法涵盖了HTTP请求方法,包括get, post, put, delete. 本文分享自华为云社区<Springboot RestTempl ...
- 探索开源工作流引擎Azkaban在MRS中的实践
摘要:本文主要介绍如何在华为云上从0-1搭建azkaban并指导用户如何提交作业至MRS. 本文分享自华为云社区<开源工作流引擎Azkaban在MRS中的实践>,作者:啊喔YeYe. 环境 ...
- 教你3种Kafka的指定副本作为Leader的实现方式
摘要:因为在我们实际的运维过程中,需要指定某个副本为ISR,但是Kafka中的Leader选举策略并不支持这个功能,所以需要我们自己来实现它. 本文分享自华为云社区<Kafka的指定副本作为Le ...
- Go语言逆向技术:恢复函数名称算法
摘要:在对程序做安全审计.漏洞检测时,通常都需要对程序做逆向分析,本文在没有符号表的情况下,提出了一种恢复函数名称的算法,方便对go语言二进制文件进行逆向分析,提升分析效率. 本文分享自华为云社区&l ...
- 火山引擎DataLeap数据质量动态探查及相关前端实现
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 需求背景 火山引擎DataLeap数据探查上线之前,数据验证都是通过写SQL方式进行查询的,从编写SQL,到解析运 ...
- 带你全方面了解字节 A/B 实验的文化与工具
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 A/B 测试是在相同的环境下,通过随机的抽样把对照组和控制组进行区分,并分别实行新旧两种策略,结合一定的统计方法来 ...
- PyCharm View as Array 查看数组
代码中设置断点. 在Debug Variables 里面,点击 View as Array 如下图所示:
- Intellij IDEA、 Pycharm 格式化换行,竖线修改 最大 分隔 线
Intellij IDEA. Pycharm 等开发工具,超过 竖线,Ctrl + L 格式化时,就会换行 格式化后,现在的显示器分辨率高,这样右边一大片空白,看起来很不舒服 File -> S ...
- PlayWright安装及使用
PlayWright是由业界大佬微软(Microsoft)开源的端到端 Web 测试和自动化库,可谓是大厂背书,功能满格,虽然作为无头浏览器,该框架的主要作用是测试 Web 应用,但事实上,无头浏览器 ...
- Pycharm 2023 年最新激活码、破解教程,亲测有用,永久有效
申明:本教程 Pycharm 破解补丁.激活码均收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除.若条件允许,希望大家购买正版 ! PS: 本教程最新更新时间: 2023年2月2日~ ...