echarts饼图自动动画_echarts饼图定时自动切换
pie_chart.js文件内容如下
var domchart = document.getElementById("mychart");
var domtitle = document.getElementById("mytitle");
var myindex = 0;
var mycolor = ['red','green','purple','blue', 'black','pink'];
function DrawPieArea(drawdom, piedata,color, curIndex, titleDom) {
option = {
color:color,
series: [
{
type: 'pie',
radius: ['80%', '90%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
formatter: "{B|{c}}{L|人}\n{S|{d}%}",
textStyle: {
color: 'red',
rich:{
B: {
fontSize: 40,
fontWeight: 'bolder',
lineHeight:50,
},
S:{
fontSize: 20,
},
L:{
fontSize: 20
}
},
}
}
},
labelLine: {
normal: {
show: false
}
},
data: piedata
}
]
};
var chart_pie = echarts.init(drawdom);
chart_pie.setOption(option, true);
if(curIndex == null) {
chart_pie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
if(titleDom) {
titleDom.text = piedata[0].name;
titleDom.style.color=color[0];
}
}
else {
chart_pie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: curIndex});
if(titleDom) {
titleDom.innerHTML = piedata[curIndex].name;
titleDom.style.color=color[curIndex];
}
setInterval(function () {
var dataLen = piedata.length;
// 取消高亮
chart_pie.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: curIndex});
curIndex = (curIndex + 1) % dataLen;
if(titleDom) {
titleDom.innerHTML = piedata[curIndex].name;
titleDom.style.color=color[curIndex];
}
//设置高亮
chart_pie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: curIndex});
}, 3000);
}
}
var data = [
{ value: 3108, name: '18岁以下' },
{ value: 2348, name: '19~25岁' },
{ value: 1358, name: '26~30岁' },
{ value: 1548, name: '31~40岁'},
{ value: 1548, name: '41岁以上'},
{ value: 3350, name: '年龄不详'},
];
DrawPieArea(domchart, data, mycolor, myindex, domtitle);
echarts饼图自动动画_echarts饼图定时自动切换相关推荐
- mysql 自动备份发送,Centos定时自动备份MySQL数据库并发送至指定邮箱
在Centos中使用Cron定时自动备份mysql数据库并通过Mutt发送到指定Gmail邮箱,利用Gmail垃圾邮件策略实现定时删除 { No.1 编写Shell 文件 } // Path /roo ...
- 间隔一段时间重复自动登录网站、定时自动登录网站的软件 —— 定时执行专家,无需复杂编程,简单配置即可使用
常常有网友在网上发帖求助,想找一个定时自动登录网页(网站)的软件,大致需求如下: 1.打开网页 → 2.填写用户名.密码 → 3.点击登录按钮 → 4.登录成功 另外,还有诸如:要求间隔是每3个小时自 ...
- ftp服务器 自动备份,FtpCopy数据定时自动备份软件(FTP定时备份)
1. 软件说明 FtpCopy是一款免费的FTP数据自动备份软件,如果FtpCopy对您有较大的帮助,欢迎捐赠我们,我们对您表示衷心的感谢! 如果有需求的话会一直更新下去,将软件做到极致! 有问题可直 ...
- echarts饼图自动动画_echarts实现自动轮播tooltip
最近需要实现echarts图形中hover效果轮播(即tooltip在各个数据点上轮流显示)的功能,以下就是我学习的一个过程,只是提供思路,具体场景需要自己修改.(仅针对echarts 2.2.7及以 ...
- echarts 饼图移动端_echarts饼图--数据交互
/*饼图 鼠标经过时模块放大功能 */ // 路径配置 require.config({ paths: { echarts: 'js/' } }); // 使用 require( [ 'echarts ...
- echarts 饼图进度条_echarts饼图
在echarts的官网上我们可以看到很多的官方实例,很多酷炫的模型都已经设计好了,不过这些模型的数据一般都是在实例中写死,平时在我们项目里可没有这些死数据,如何从后台获取需要的数据,并且把这些数据拼装 ...
- echarts字变大_echarts饼图字体大小修改
const option = { tooltip: { trigger: 'item', formatter: "{a} {b}: {c} ({d}%)" }, series: [ ...
- chart.js 饼图显示百分比_Echarts饼图展示车站客流占比图
安装官方教程,今天我们试一下Echarts绘制饼图 第一步:准备基础数据 用随机数模拟下5个车站的进出站总人数,具体如下表: 车站进出站总人数 第二步:绘制基础饼图 按教程示例,用Echarts绘制基 ...
- mysql 自动执行语句_MYSQL 定时自动执行任务
MYSQL5.1开始支持EVENT功能,类似Oracle和MSSQL的定时任务job功能.有了这个功能之后我们就可以让MySQL自动的执行存储过程来实现数据汇总等功能了,不用像以前哪样手动操作完成了. ...
- mysql 自动热备份_mysql(mariadb)定时自动热备份+增量+远程备份脚本
优点:热备份,不影响业务,增量备份,远程备份. 目的:自动打包备份到远程10.0.0.111备份服务器 前提: 1.安装xtrabackup yum install http://www.percon ...
最新文章
- 对matlab中colormap的解释及fill、imshow的用法说明
- webapp 状态栏沉浸式
- C++多态,虚函数,纯虚函数
- webpack基础第一篇(配置文件)
- 命令行运行vbs脚本并传参数给vbs中的变量简单示例
- [物理学与PDEs]第2章第2节 粘性流体力学方程组 2.6 一维粘性热传导流体动力学方程组...
- SAP CRM调查问卷的评分和图表显示功能介绍 1
- 用数学模型向你解释离婚
- 数据科学和人工智能技术笔记 十、模型选择
- get和post混合提交
- 中国航天人才市场网站被黑达90余天
- SpringBoot+Nacos+Seata实现Dubbo分布式事务管理
- 博文视点读书节第十日丨大咖书单最终章技术分享双倍放送!
- html返回顶部代码(简单)
- 单片机原理及接口技术第1章
- 本地图文直接复制到动易CMS编辑器中
- 用艾宾浩斯曲线记忆周期来背单词是否有理论依据?
- Word基础(三十八)插入书签
- `英语` 2022/8/4
- script什么意思中文翻译成,script中文是什么意思
热门文章
- golang反射修改结构体字段(reflect.flag.mustBeAssignable using value obtained using unexported field) 2020.8.18
- 瑞利商(Rayleigh Quotient)及瑞利定理(Rayleigh-Ritz theorem)的证明
- ubuntu 16.04+Titan Xp + Cuda 9.0 + Cudnn 7.0 + Caffe
- 阿里P9大佬手写的Java核心开发手册(2022版)覆盖P5到P8所有技术栈
- 服务器安装sata固态硬盘吗,SATA接口固态硬盘安装教程
- 大数据未来七大发展方向 01.物联网
- 集成底座项目实施总结
- 10个城市logo设计
- 闪讯利用openwrt路由器拨号教程(五)
- 计算机需要权限来执行此操作 win7,Win7系统下“文件夹访问被拒绝 您需要权限来执行操作”解决方法...