当前位置: 首页 > news >正文

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

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

echarts试一试

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

showBackground: true,
backgroundStyle: {borderRadius: 9,color: 'RGB(255,199,91, 0.2)'
}

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.lryc.cn/news/462915.html

相关文章:

  • FLINK SQL 元数据持久化扩展
  • MySQL【知识改变命运】04
  • AD9680(adc直采芯片)使用说明
  • 无人机之位置信息计算篇
  • 安卓cpu知识
  • 图书管理新纪元:Spring Boot进销存系统
  • Application protocol
  • 金融信用评分卡建模项目:AI辅助
  • java对接GPT 快速入门
  • 微信小程序引入组件教程
  • STM32—SPI通信外设
  • Ubuntu:用户不在sudoers文件中
  • 五、Spring Boot集成Spring Security之认证流程2
  • 接口测试(全)
  • 【学习】word保存图片
  • 【实战篇】用SkyWalking排查线上[xxl-job xxl-rpc remoting error]问题
  • 三勾软件/ java+springboot+vue3玖玖云电商ERP多平台源码
  • 020 elasticsearch7.10.2 elasticsearch-head kibana安装
  • 基于SpringBoot+Vue的蜗牛兼职网的设计与实现(带文档)
  • Linux 命令 chown 和 chmod 的区别
  • 盘点慢查询原因及优化方法
  • 【热门】智慧果园管理系统解决方案
  • torch.nn.Sequential介绍
  • 使用verilog设计实现的数字滤波器(低通、高通、带通)及其仿真
  • KPaaS集成平台中怎么创建数据可视化大屏
  • 深度学习:网络压缩(Network Compression)详解
  • Go pprof性能分析
  • 扬帆出海!九章云极DataCanvas公司惊艳亮相迪拜GITEX Global 2024
  • Qt | 元对象+元枚举+Qt自带图标案例
  • linux升级cmake