手把手教你用echarts实现柱形图的闪烁效果

经常会见到小伙伴做出来的柱形图带有动态，闪烁的效果，小编本着好学好问（工作要求）的精神，终于找到了方法。下面就跟小编一起来看如何用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文件：

<template>
  <div style="height:500px" ref="echart" id="bar">柱状图</div>
</template>

<script>
export default {
  name: "bar",
  data() {
    return {
      option: null
    };
  },
  methods: {
    draw() {
      let myChart = this.$echarts.init(document.getElementById("bar"));
      this.option = {
        title: {
          text: "成交量",
          left: 10
        },
        xAxis: {
          type: "category",
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "151",
            "16",
            "17",
            "18",
            "19",
            "20"
          ]
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          splitNumber: 2
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: "rgba(159,230,184,0.7)" },
                { offset: 0.5, color: "rgb(141,193,169)" },
                { offset: 1, color: "rgb(115,163,115)" }
              ]),
              barBorderRadius: 5
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "black",
                fontSize: 16
              }
            },
            emphasis: {
              itemStyle: {
                //颜色渐变函数LinearGradient，4和参数分别表示四个位置依次为左、下、右、上
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: "rgba(221,107,102,0.7)" },
                  { offset: 0.8, color: "rgb(238,64,61)" },
                  { offset: 1, color: "rgb(186,39,38)" }
                ]),
                barBorderRadius: 5,
                borderColor: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  1,
                  [
                    { offset: 0, color: "rgba(221,107,102,0.7)" },
                    { offset: 0.8, color: "rgb(238,64,61)" },
                    { offset: 1, color: "rgb(186,39,38)" }
                  ]
                ),
                borderWidth: 3,
                lineWidth: 2,
                twinkle: {
                  //闪烁
                  enabled: true, //启用
                  period: 2000 //动画时间
                }
              },
              label: {
                show: true
              }
            }
          }
        ]
      };
      let _self = this;
      setInterval(function() {
        _self.option.series[0].data = _self.$options.methods.getArrRandomly(20);
        console.log(_self.option.series[0].data);
        _self.option.series[0].data.forEach((item, curidx) => {
          //取消之前的高亮
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: curidx
          });
          if (item > 50) {
            myChart.dispatchAction({
              type: "highlight",
              dataIndex: curidx
              });
          }
        });
        myChart.setOption(_self.option, true);
      }, 2000);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    getArrRandomly(len) {
      let arr = [];
      for (let i = len - 1; i >= 0; i--) {
        let itemIndex = Math.floor(Math.random() * 100);
        arr[i] = itemIndex;
      }
      return arr;
    }
  },
  mounted() {
    this.draw();
  }
};
</script>

<style scoped></style>

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