經(jīng)常會(huì)見到小伙伴做出來(lái)的柱形圖帶有動(dòng)態(tài)，閃爍的效果，小編本著好學(xué)好問(wèn)（工作要求）的精神，終于找到了方法。下面就跟小編一起來(lái)看如何用echarts實(shí)現(xiàn)柱形圖的閃爍效果吧。

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');
 //聲明一個(gè)變量
 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';
 }
//使用動(dòng)畫animate函數(shù)，用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文件：

	柱狀圖

怎么樣，是不是效果很酷炫，動(dòng)態(tài)效果的柱形圖更能吸引人的眼球，大家一起用echarts實(shí)際操作一下吧！

你是否渴望進(jìn)一步提升數(shù)據(jù)可視化的能力，讓數(shù)據(jù)展示更加專業(yè)、高效呢？現(xiàn)在，有一門絕佳的課程能滿足你的需求 ——Python 數(shù)據(jù)可視化 18 講（PyEcharts、Matplotlib、Seaborn）。

學(xué)習(xí)入口：https://edu.cda.cn/goods/show/3842?targetId=6751&preview=0

這門課程完全免費(fèi)，且學(xué)習(xí)有效期長(zhǎng)期有效。由 CDA 數(shù)據(jù)分析研究院的張彥存老師精心打造，他擁有豐富的實(shí)戰(zhàn)經(jīng)驗(yàn)，能將復(fù)雜知識(shí)通俗易懂地傳授給你。課程深入講解 matplotlib、seaborn、pyecharts 三大主流 Python 可視化工具，帶你從基礎(chǔ)繪圖到高級(jí)定制，還涵蓋多元圖表類型和各類展示場(chǎng)景。無(wú)論是數(shù)據(jù)分析新手想要入門，還是有基礎(chǔ)的從業(yè)者希望提升技能，亦或是對(duì)數(shù)據(jù)可視化感興趣的愛好者，都能從這門課程中收獲滿滿。點(diǎn)擊課程鏈接，開啟你的數(shù)據(jù)可視化進(jìn)階之旅，讓數(shù)據(jù)可視化成為你職場(chǎng)晉升和探索數(shù)據(jù)世界的有力武器！

你是否渴望進(jìn)一步提升數(shù)據(jù)可視化的能力，讓數(shù)據(jù)展示更加專業(yè)、高效呢？現(xiàn)在，有一門絕佳的課程能滿足你的需求 ——Python 數(shù)據(jù)可視化 18 講（PyEcharts、Matplotlib、Seaborn）。

學(xué)習(xí)入口：https://edu.cda.cn/goods/show/3842?targetId=6751&preview=0

這門課程完全免費(fèi)，且學(xué)習(xí)有效期長(zhǎng)期有效。由 CDA 數(shù)據(jù)分析研究院的張彥存老師精心打造，他擁有豐富的實(shí)戰(zhàn)經(jīng)驗(yàn)，能將復(fù)雜知識(shí)通俗易懂地傳授給你。課程深入講解 matplotlib、seaborn、pyecharts 三大主流 Python 可視化工具，帶你從基礎(chǔ)繪圖到高級(jí)定制，還涵蓋多元圖表類型和各類展示場(chǎng)景。無(wú)論是數(shù)據(jù)分析新手想要入門，還是有基礎(chǔ)的從業(yè)者希望提升技能，亦或是對(duì)數(shù)據(jù)可視化感興趣的愛好者，都能從這門課程中收獲滿滿。點(diǎn)擊課程鏈接，開啟你的數(shù)據(jù)可視化進(jìn)階之旅，讓數(shù)據(jù)可視化成為你職場(chǎng)晉升和探索數(shù)據(jù)世界的有力武器！