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