修改Echarts源码实现柱状图的炫彩闪烁效果

本次工作需要使用Echarts设计大屏展示，考虑到风险告警功能要对超过阈值的数据标记高亮，同时加强提醒，需要对柱状图的高亮做出一些修改。

查阅资料，有博主已经做出了我想实现的效果，如下图所示，附上原博客地址。

但是该博主的代码还有一部分没有写出来，直接使用是有点问题的。经历一个小时的百度，终于发现问题所在。

对Echarts源码进行修改时，不仅需要修改src下的js文件，还需要修改lib下的文件（灵感来源于Echarts源码修改这篇博客

最终实现的效果如下：

超过50的数值标红闪烁进行告警

1.安装Echarts

npm install echarts

2.在node_modules中找到Echarts依赖包

3.打开src->chart->bar->BarView.js

function updateStyle(
 el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal, isPolar
) {
   
 var color = data.getItemVisual(dataIndex, 'color');
 var opacity = data.getItemVisual(dataIndex, 'opacity');
 var stroke = data.getVisual('borderColor');
 var itemStyleModel = itemModel.getModel('itemStyle');
 //声明一个变量
 var twinkle = itemModel.getModel('emphasis.itemStyle.twinkle');
 var hoverStyle = itemModel.getModel('emphasis.itemStyle').getBarItemStyle();

 if (!isPolar) {
   
     el.setShape('r', itemStyleModel.get('barBorderRadius') || 0);
 }

 el.useStyle(zrUtil.defaults(
     {
   
         stroke: isZeroOnPolar(layout) ? 'none' : stroke,
         fill: isZeroOnPolar(layout) ? 'none' : color,
         opacity: opacity
     },
     itemStyleModel.getBarItemStyle()
 ));

 var cursorStyle = itemModel.getShallow('cursor');
 cursorStyle && el.attr('cursor'