//学校资产占比的配置
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轮训展示某个的更多相关文章

  1. Echarts地图展示及属性分析

    Echarts,一个效果非常棒的可视化库,可以生产各种图表,动态展示,附上官方网址:http://www.echartsjs.com/index.html 之前带本科实习时有同学用过,狗哥的博客也用这 ...

  2. ODOO引用Echarts数据展示

    作为一个后端开发,首先想到的是将需要的数据进行处理反馈给前端. 具体如下: 然后就是专门的echarts模块(我这样写主要是因为echarts会用到的地方比较多,后续直接调用) 1. 2.echart ...

  3. vue学习【一】vue引用封装echarts并展示多个echarts图表

    大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...

  4. 假期学习【十】首都之窗百姓信件JavaWweb+Echarts图表展示

    今天主要对昨天爬取的数据进行处理,处理后用Echart图表展示, 效果如下:

  5. react使用echarts地图实现中国地图大区展示

    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...

  6. 使用echarts展示线状图信息的时候数据部分数据因为x轴的数据显示不全而隐藏的问题

    在使用echarts来展示数据时,因为数据很多的原因导致x轴显示不全,然后有些数据也隐藏在图表中,所以这个时候我们要在 series 中设置一个属性,让所有的数据都能够展示出来,这里我们需要添加的属性 ...

  7. echarts 地图 动态 展示 结合css+js

    echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...

  8. 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

    什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...

  9. Echarts在JavaWeb中与后台的交互实现

    本Web系统后台框架是:Spring+SpringMVC+Mybatis+Shiro+Maven.完整系统搭建的配置过程见上一篇文章:基于Spring+SpringMVC+Mybatis的Web系统搭 ...

  10. 使用Echarts实现动态曲线图表

    最近做的一个在线气象观测网站要实现一个需求:使用图表展示最近五天温湿度等气象要素的曲线变化 具体效果参考:http://www.weatherobserve.com/showInfoIndex.jsp ...

随机推荐

  1. “互联网+”大赛之智慧校园 赛题攻略:你的智慧校园,WeLink帮你来建

    摘要:本赛题的核心就是借助华为云WeLink的中台服务能力/开发工具等,结合学校的具体的高价值场景,开发出WeLink小程序,方便师生的学习与生活. 本文分享自华为云社区<"互联网+& ...

  2. 华为云GaussDB(for Influx)揭秘第五期:最佳实践之子查询

    摘要: GaussDB(for influx)提供灵活的子查询能力,满足海量数据场景下的高性能查询需求. 本文分享自华为云社区<华为云GaussDB(for Influx)揭秘第五期:最佳实践之 ...

  3. sqlite3.OperationalError: no such function: JSON_VALID

    Initializing database.. Traceback (most recent call last): File "d:\program files\python38\lib\ ...

  4. ElasticSearch 创建、删除索引

    创建索引: PUT http://IP:Port/mytest-statistics { "aliases": {}, "mappings": { " ...

  5. CF(codeforces)如何保持紫名及以上?

    虽然我还是连绿名都没,但还是想学习大牛们的学习方法,加油尽早上分. 转自知乎 之前在 CF 上看到一条不错的评论 https://codeforces.com/blog/entry/66715?#co ...

  6. Spring EL 表达式

    本篇讲述了Spring Expression Language -- 即Spring3中功能丰富强大的表达式语言,简称SpEL. SpEL是类似于OGNL和JSF EL的表达式语言,能够在运行时构建复 ...

  7. 2023陕西省大学生信息安全竞赛web writeup

    前言 早写好了,忘发了,题目质量还行,够我坐大牢 ezpop 简单的反序列化,exp如下 <?php class night { public $night; } class day { pub ...

  8. 【Serverless实战】传统单节点网站的Serverles

    什么是函数?刚刚考完数学没多久的我,脑里立马想到的是自变量.因变量.函数值,也就是y=f(x).当然,在计算机里,函数function往往指的是一段被定义好的代码程序,我们可以通过传参调用这个定义好的 ...

  9. SpringBoot发布https服务

    一.生成SSL证书 1.进入本地jdk的路径 cd D:\Program\jdk1.8.0_77\jre\lib\security cmd窗口生成证书HSoftTiger.keystore到D盘 ke ...

  10. Nginx Location 深入剖析及动静分离简易配置

    本文为博主原创,未经允许不得转载: 1. location 使用分析 location 是 Nginx 配置 中的一个指令,用于访问的 URL 匹配,而在这个 location 中所配置的每个指令将会 ...