【Echarts动态排序图,series使用背景色更新动画,背景底色不同步跟随柱子动画】大家有没有解决方案

news/2024/10/22 5:14:06/

echarts动态排序图背景色动画不同步

echarts试一试

series下面添加了showBackground属性,动画时底色背景不同步跟随柱图

javascript">showBackground: true,
backgroundStyle: {borderRadius: 9,color: 'RGB(255,199,91, 0.2)'
}
javascript">
const data = [];
for (let i = 0; i < 5; ++i) {data.push(Math.round(Math.random() * 200));
}
option = {xAxis: {max: 'dataMax'},yAxis: {type: 'category',data: ['A', 'B', 'C', 'D', 'E'],inverse: true,animationDuration: 300,animationDurationUpdate: 300,max: 4 // only the largest 3 bars will be displayed},series: [{realtimeSort: true,name: 'X',type: 'bar',data: data,label: {show: true,position: 'right',valueAnimation: true},showBackground: true,backgroundStyle: {borderRadius: 9,color: 'RGB(255,199,91, 0.2)'},animation: true}],legend: {show: true},animationDuration: 0,animationDurationUpdate: 3000,animationEasing: 'linear',animationEasingUpdate: 'linear',animation: true
};
function run() {for (var i = 0; i < data.length; ++i) {if (Math.random() > 0.9) {data[i] += Math.round(Math.random() * 2000);} else {data[i] += Math.round(Math.random() * 200);}}myChart.setOption({series: [{type: 'bar',data}]});
}
setTimeout(function () {run();
}, 0);
setInterval(function () {run();
}, 2000);

http://www.ppmy.cn/news/1540986.html

相关文章

简述 C# 二维数据集合 List 的创建、遍历、修改、输出

简述 C# 二维数据集合 List 的创建、遍历、修改、输出 1、为什么要使用列表 List2、引入命名空间3、声明一维列表 List4、声明创建一个二维列表 List&#xff0c;数据类型 int5、 简单访问元素6、遍历二维列表&#xff0c;控制台输出7、遍历二维列表&#xff0c;修改数据&#…

Kubernetes集群搭建容器云需要几台服务器?

Kubernetes集群搭建容器云需要几台服务器&#xff1f;至少需要4台服务器。搭建容器云所需的服务器数量以及具体的搭建步骤&#xff0c;会根据所选用的技术栈、业务规模、架构设计以及安全需求等因素而有所不同。以下是一个基于Kubernetes集群的容器云搭建的概述&#xff1a; 一…

css的思考

CSS思考[vue react tailwindcss] 传统css 全局作用域: 一旦生效&#xff0c;应用于全局&#xff0c;造成各种各样的冲突&#xff0c;为了避免冲突&#xff0c;会写复杂的id选择器和类选择器依赖问题&#xff1a;引入多个css样式文件&#xff0c;引入的css文件会对后面的css文…

hadoop_hdfs详解

HDFS秒懂 HDFS定义HDFS优缺点优点缺点 HDFS组成架构NameNodeDataNodeSecondary NameNodeClient NameNode工作机制元数据的存储启动流程工作流程 Secondary NameNode工作机制checkpoint工作流程 DataNode工作机制工作流程数据完整性 文件块大小块太小的缺点块太大的缺点 文件写入…

《汇编语言》笔记一 寄存器

通用寄存器 8086CPU的所有的寄存器都是16位的&#xff0c;可以存放两个字节。AX、BX、CX、DX这4个寄存器为通用寄存器。 一个16位寄存器可以存储一个16位的数据。 8086CPU的上一代CPU中的寄存器都是8位&#xff0c;为了保证兼容&#xff0c;使原来基于上代CPU编写的程序稍加修…

小程序底部导航按钮实现

商城小程序需要四个底部导航按钮&#xff0c;遂记录一下实现过程 最终实现效果如下所示 新建一个小程序项目&#xff0c;我是创建了JS模板&#xff0c;项目创建完成后需要新建五个文件夹&#xff0c;其中四个&#xff08;page子文件夹&#xff09;用于存放pages文件&#xff0…

外包干了3周,技术退步太明显了。。。。。

先说一下自己的情况&#xff0c;大专生&#xff0c;21年通过校招进入武汉某软件公司&#xff0c;干了差不多3个星期的功能测试&#xff0c;那年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我才在一个外包企业干了3周的功…

软考(网工)——局域网和城域网

文章目录 &#x1f550;局域网基础1️⃣局域网和城域网体系架构 IEEE&#xff08;负责链路层&#xff09;2️⃣局域网拓扑结构 &#x1f551;CSMA/CD1️⃣CSMA/CD2️⃣CSMA/CD三种监听算法3️⃣冲突检测原理 &#x1f552;二进制指数退避算法1️⃣ 二进制指数退避算法 &#x1…