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

【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.kler.cn/news/354565.html

相关文章:

  • 遥感技术助力生态系统碳储量、碳收支、碳循环等多领域监测与模拟:森林碳储量,城市扩张,夜间灯光数据,陆地生态系统,大气温室气体监测等
  • 轻量级可视化数据分析报表,分组汇总表!
  • MySQL—关于数据库的CRUD—(增删改查)
  • Vue——Uniapp回到顶部悬浮按钮
  • TS和JS中,string与String的区别
  • 【VUE】Vue中的data属性为什么是一个函数而不是一个对象
  • 机器学习:opencv--光流估计
  • 一文探索RareShop:首个面向消费者的RWA NFT商品发售平台
  • Spring Boot 2.6=>2.7 升级整理
  • 域1:安全与风险管理 第3章(BCP)和第4章(Laws, regulations, and compliance)
  • leaflet(一)初始化地图
  • Mybatis--简略2
  • 树莓派4B-用串口读取JY901S陀螺仪数据
  • JNI是什么
  • vue综合指南(六)
  • 自动化工具:Ansible
  • 基于腾讯云的AI视频课程制作工具
  • 如何在Python中编写自定义上下文管理器?
  • 【AIGC】让AI像人一样思考和使用工具,reAct机制详解
  • 基于Springboot+Vue的农业收成管理系统(含源码数据库)