最近需要实现一个, 在折线图中要对数据进行一个闪烁显示的功能. 用到的是ecahrts的effectScatter.
在ecahrts中, 关于涟漪图-effectScatter的文档在此链接可以进行查阅
let opt = {
...
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// splitLine :{ //网格线
// lineStyle:{
// type:'dashed', //设置网格线类型 dotted:虚线 solid:实线
// color: '#297A7D'
// },
// show:true //隐藏或显示
// },
// axisLabel: { // x轴的刻度标签设置
// show: true,
// textStyle: {
// color: '#68E2E6'
// },
// fontSize:15,
// },
},
yAxis: {
...
type: 'value',
// splitLine :{ //网格线
// lineStyle:{
// type:'dashed', //设置网格线类型 dotted:虚线 solid:实线
// color: '#297A7D'
// },
// show:true //隐藏或显示
// },
// axisLabel: { // x轴的刻度标签设置
// show: true,
// textStyle: {
// color: '#68E2E6'
// },
// fontSize:15,
// },
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
},
// 闪烁点的重点是以下配置
{
// 设置涟漪特效动画
type:'effectScatter',
// 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d
coordinateSystem: 'cartesian2d',
// 单个闪烁点 ↓
data: [{value:['Mon',820],symbolSize:8}], //2d坐标系--[x轴, y轴, 标记大小]
// 多个闪烁点 ↓
// 方法一 -- start:
// data: [{value:['Mon',820],symbolSize:10},{value:['Tue',932],symbolSize:10}],
// 方法一 -- end
// 方法二 -- start:
// data: [['Mon',820],['Tue',932]], //2d坐标系--[x轴, y轴, 标记大小]
// symbolSize: 10,
// 方法二 -- end
// 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮(hover)的时候显示特效
showEffectOn: 'render',
// 涟漪特效配置
rippleEffect: {
// 波纹的绘制方式,可选'stroke'和'fill'
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#fff',
shadowBlur: 30,
shadowColor: '#fff'
}
},
zlevel:1
}
]
};