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 ...
随机推荐
- 详解GaussDB(DWS)的CPU资源隔离管控能力
摘要:GaussDB使用cgroup实现了两种cpu管控能力,基于cpu.shares的共享配额管控和基于cpuset的专属限额管控. 本文分享自华为云社区<GaussDB(DWS)的CPU资源 ...
- 鲲鹏基础软件开发赛道openLooKeng赛题火热报名中,数十万大奖等您来收割
随着云计算.物联网.移动计算.智慧城市.人工智能等领域的发展,各类应用对大数据处理的需求也发生着变化.以实时分析.离线分析.交互式分析等为代表的计算引擎逐渐为各大企业行业发展所看重.作为鲲鹏产业生态的 ...
- 华为云开天aPaaS 上线,服务千万开发者,使能行业场景化创新
摘要:9月25日,华为云在华为全联接2021发布四大生态策略,并宣布2022年投入1亿美元升级沃土云创计划.华为云开天aPaaS正式上线,实现经验即服务,使能行业场景化创新. 本文分享自华为云社区&l ...
- 华为云VSS漏洞扫描服务之开源组件漏洞检测能力
摘要:华为云VSS漏洞扫描服务提供针对于Web.主机和软件包的漏洞检测能力. 近日Apache Log4j2漏洞持续发酵,已成为中国互联网2021年年底前最大的安全事件.华为云VSS漏洞扫描服务,提供 ...
- vue2升级vue3:class component的遗憾
在vue2,class 写法真的非常爽 import { Component as tsc } from 'vue-tsx-support'; import { Component, Watch } ...
- Linux上非root用户jdk环境变量配置
1.设置用户环境变量vi .bash_profile 或者是 vi ~/.bashrc 2.JAVA_HOME=/home/sgmm/jdk1.6.0_13 CLASSPATH=$JAVA_HOME/ ...
- DNS--安装&&配置文件
1 下载 #下载服务yum -y install bind#下载解析工具yum -y install bind-utils 2 配置文件 主配置文件 /etc/named.conf 区配置文件 /va ...
- leaflet marker 旋转
leaflet.markerRotation.js 代码(这段代码是从插件 leaflet.polylineDecorator.js 中复制的): // leaflet 实现 marker 旋转 (f ...
- Spring注解@Resource和@Autowired区别对比 (附 Maven 引入方法)
@Resource 导入方法: <dependency> <groupId>javax.annotation</groupId> <artifactId> ...
- 扒一扒ProcessOn 新功能——一键编号、图形组合、左侧导航、画布水印、表格组件
思维导图.一键编号 思维导图新增 多种全新主题风格,让您的创作赏心悦目 思维导图新增 一键编号 功能 流程图.图形组合 自定义组合图形功能:新增流程图 我的图形 功能,用户可以设置或者上传自己的图形 ...