最近项目中有一个需求,要求折线图点位的实际值大于阈值的时候,对应的点位要实现闪烁的效果,网上百度了一通,只找到一篇有一点启发的博文,但是内容只是点到即止,对于我这种脑子电量不足的人来说,有点不够用,如果你的电量满格可以点击这里看看。
先来看看实现的简单效果:
首先要实现这样的效果需要echarts的版本达到3.0以上。
这这之前我的思考方向是自定义拐点的样式,于是去查API发现series的data里面确实symbol的属性我们可以通过这个属性的不同值实现拐点的不同样式,ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’,也可以通过 ‘image://url’ 设置为图片,其中 url 为图片的链接,或者 dataURI。但是这种方式不同实现拐点动态闪烁的效果,于是乎放弃了。
然后在度娘上看到了上面那边博客,发现,其实在echarts3.0开始,官方提供了一种type为“effectScatter”的图形,这种图形可以实现一种涟漪的效果,我们可以自定义不同的颜色,这样其实就可以实现高亮闪烁的效果了。
下面是实例代码(Vue中使用的):
let obj = this.$refs.echart;
let x = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
let series = [
{
name: '总量',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {
normal: {}
},
data: [0,50, 100, 150, 200, 150,100]
}
]
let option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: x
}],
yAxis: [{
type: 'value'
}],
series: series
};
let effectScatterData = [];
for(let item in series) {
let data = series[item].data;
for(let i = 0; i < data.length; i++) {
if(data[i]>100){
effectScatterData.push([x[i], data[i]])
}
}
};
console.log("effectScatterData:", effectScatterData)
let effectScatter = {
name: '告警',
type: 'effectScatter',
coordinateSystem: 'cartesian2d',
data: effectScatterData, //2d坐标系
symbolSize: 15,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: 'red',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
};
option.series.push(effectScatter);
let chart = this.echarts.init(obj);
chart.setOption(option)
上面的代码实现了截图中的简单效果。
其实这个闪烁的(effectScatter)点只是覆盖在了原来的拐点上,他需要传入需要闪烁拐点的横纵坐标。当然在使用effectScatter的时候需要明确是哪那种坐标系中描点,官方提供了三种坐标系:
1. cartesian2d:二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
2. polar:极坐标系,通过 polarIndex 指定相应的极坐标组件
3. geo:地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。
我们折线图是使用的2d直角坐标系所以coordinateSystem:设置问哦cartesian2d。
这里只是简单的应用,具体的需求还是要自己多看API。