基于Echarts柱状图做的闪烁效果

由于工作需要，想在柱状图上添加上闪烁效果，查看echarts文档，发现图表中居然没有这个功能，只能撸开袖子自己干了。
考虑到echarts是基于zrender开发的，于是就找到了这个canvas类库的文档，该文档是有动画事件的，于是下载echarts源码，找到对应bar的js,修改源码，重新打包，于是效果就出来了

2020-07-02把坑填一下
首先我们下载echarts的源码，可以选择去官网下载或者点击下载
下载完成解压后用VSCode打开它
接下来我们打开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 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', cursorStyle);

 var labelPositionOutside = isHorizontal
     ? (layout.height > 0 ? 'bottom' : 'top')
     : (layout.width > 0 ? 'left' : 'right');

 if (!isPolar) {
     setLabel(
         el.style, hoverStyle, itemModel, color,
         seriesModel, dataIndex, labelPositionOutside
     );
 }
 if (isZeroOnPolar(layout)) {
     hoverStyle.fill = hoverStyle.stroke = 'none';
 }
 graphic.setHoverStyle(el, hoverStyle);
}

找到这个方法，这个方法主要就是设置柱状图的样式，我们可以在这里声明一个变量，接收一个值或者一个Object,从而实现用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 = itemStyleModel.get('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', cursorStyle);

 var labelPositionOutside = isHorizontal
     ? (layout.height > 0 ? 'bottom' : 'top')
     : (layout.width > 0 ? 'left' : 'right');

 if (!isPolar) {
     setLabel(
         el.style, hoverStyle, itemModel, color,
         seriesModel, dataIndex, labelPositionOutside
     );
 }
 if (isZeroOnPolar(layout)) {
     hoverStyle.fill = hoverStyle.stroke = 'none';
 }
 if(twinkle){
     el.animate('style', true)
         .when(1500, {
             fill:'#76DA91',
             stroke:'#76DA91',
             lineWidth:7.5,
             opacity:0.5
         })
         .when(3000, {
             fill:'#76DA91',
             stroke:'#76DA91',
             lineWidth:0,
             opacity:0.25
         })
         .start();
 }
 graphic.setHoverStyle(el, hoverStyle);
}

这段代码中我已经声明了一个twinkle变量从前台获取，并且判断该变量如果存在的话会实现一个简单的固定颜色闪烁效果，然后可以通过

npm run build

打包echarts，从dist中选择合适的js引入到项目中
示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        itemStyle:{
            twinkle:true
        }
    }]
});

以上比较简单的写法，顶部截图为后续修改版，这里放一下使用方法和我已经打包好的js

万变不离其宗，大家也可以自己去体验下

闪烁echarts-js下载

使用方式：

 series: [
        {
            name: '预测',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
                color:'#76DA91',
                borderColor:'#76DA91',
                borderWidth:1,
                opacity:0.25,
                barBorderRadius:3,
                twinkle:{//闪烁
                    enabled:true,//启用
                    period:1000  //动画时间
                }
            }
        }
    ]

会根据设置的颜色与动画时间，透明度去改变动画效果。