经常会见到小伙伴做出来的柱形图带有动态，闪烁的效果，小编本着好学好问（工作要求）的精神，终于找到了方法。下面就跟小编一起来看如何用echarts实现柱形图的闪烁效果吧。

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', 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';
 }
//使用动画animate函数，用js传参控制柱状图特效
 if(twinkle){
     el.animate('style', true)
         when(500, {
        borderWidth:10,
        borderColor:"red",
        barBorderRadius:5,
        lineWidth:7.5,
        opacity:0.4
      })
      .when(1500, {
        lineWidth:0,
        borderColor:"red",
        barBorderRadius:5,
        opacity:0.25
         })
         .start();
 }
 graphic.setHoverStyle(el, hoverStyle);
}

4.打开lib->chart->bar->BarView.js，做跟上面一样的修改

5.components/echarts/bar.vue文件：

	柱状图

怎么样，是不是效果很酷炫，动态效果的柱形图更能吸引人的眼球，大家一起用echarts实际操作一下吧！

你是否渴望进一步提升数据可视化的能力，让数据展示更加专业、高效呢？现在，有一门绝佳的课程能满足你的需求 ——Python 数据可视化 18 讲（PyEcharts、Matplotlib、Seaborn）。

学习入口：https://edu.cda.cn/goods/show/3842?targetId=6751&preview=0

这门课程完全免费，且学习有效期长期有效。由 CDA 数据分析研究院的张彦存老师精心打造，他拥有丰富的实战经验，能将复杂知识通俗易懂地传授给你。课程深入讲解 matplotlib、seaborn、pyecharts 三大主流 Python 可视化工具，带你从基础绘图到高级定制，还涵盖多元图表类型和各类展示场景。无论是数据分析新手想要入门，还是有基础的从业者希望提升技能，亦或是对数据可视化感兴趣的爱好者，都能从这门课程中收获满满。点击课程链接，开启你的数据可视化进阶之旅，让数据可视化成为你职场晋升和探索数据世界的有力武器！

你是否渴望进一步提升数据可视化的能力，让数据展示更加专业、高效呢？现在，有一门绝佳的课程能满足你的需求 ——Python 数据可视化 18 讲（PyEcharts、Matplotlib、Seaborn）。

学习入口：https://edu.cda.cn/goods/show/3842?targetId=6751&preview=0

这门课程完全免费，且学习有效期长期有效。由 CDA 数据分析研究院的张彦存老师精心打造，他拥有丰富的实战经验，能将复杂知识通俗易懂地传授给你。课程深入讲解 matplotlib、seaborn、pyecharts 三大主流 Python 可视化工具，带你从基础绘图到高级定制，还涵盖多元图表类型和各类展示场景。无论是数据分析新手想要入门，还是有基础的从业者希望提升技能，亦或是对数据可视化感兴趣的爱好者，都能从这门课程中收获满满。点击课程链接，开启你的数据可视化进阶之旅，让数据可视化成为你职场晋升和探索数据世界的有力武器！