Echarts 折線圖最後一個點發光閃爍效果

效果如下：

實現方式：

   // 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document
		.getElementById('main'));
//數據加載完之前先顯示一段簡單的loading動畫
//myChart.showLoading();
var names = []; //橫座標數組（實際用來盛放X軸座標值）
var values = []; //縱座標數組（實際用來盛放Y座標值）
var effectValues = []; //閃爍效果

$.ajax({
	type : "post",
	async : true, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成纔可以執行）
	url : "show", //請求發送到dataActiont處
	data : {},
	dataType : "json", //返回數據形式爲json
	success : function(result) {
		//請求成功時執行該函數內容，result即爲服務器返回的json對象
		if (result) {
			for (var i = 0; i < result.length; i++) {
				names.push(result[i].name);
				values.push(result[i].num);
			}
			effectValues = values.slice(0);
			let e = {
				value : effectValues.pop(),
				symbolSize : 30
			}
			effectValues.push(e);
			myChart.hideLoading(); //隱藏加載動畫
			//debugger;
			var series = [ {
				name : '總量',
				type : 'line',
				label : {
					normal : {
						show : true,
						position : 'top'
					}
				},
				data : values
			} ];
			var myOption = { //加載數據圖表
				tooltip : {},
				toolbox : {
					show : true,
					feature : {
						mark : {
							show : true
						},
						dataView : {
							show : true,
							readOnly : false
						},
						magicType : {
							show : true,
							type : [
									'line',
									'bar',
									'stack',
									'tiled' ]
						},
						restore : {
							show : true
						},
						saveAsImage : {
							show : true
						}
					}
				},
				calculable : true,
				legend : {
					data : [ '數量' ]
				},
				xAxis : {
					data : names
				},
				yAxis : {
					type : 'value'
				},
				series : series
			};
			var effectScatter = {
				name : "數據名稱",
				type : 'effectScatter',
				coordinateSystem : 'cartesian2d',//2d座標系
				data : effectValues,
				symbolOffset : [ 0, -30 ],
				symbolSize : 0,
				large : true,
				symbol : 'circle', //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
				legendHoverLink : true, //是否啓用圖例 hover 時的聯動高亮。
				hoverAnimation : true, //是否開啓鼠標 hover 的提示動畫效果。
				effectType : 'ripple', //特效類型，目前只支持漣漪特效'ripple'。
				showEffectOn : 'render', //配置何時顯示特效。可選：'render' 繪製完成後顯示特效。'emphasis' 高亮（hover）的時候顯示特效。

				cursor : 'pointer',
				rippleEffect : { //漣漪特效相關配置。
					period : 1.5, //動畫的時間。
					scale : 6, //動畫中波紋的最大縮放比例。
					brushType : 'stroke', //波紋的繪製方式，可選 'stroke' 和 'fill'。
				},
				hoverAnimation : true,
				itemStyle : {
					normal : {
						color : 'red',
						shadowBlur : 10,
						shadowColor : '#333'
					}
				},
				zlevel : 1
			};
			myOption.series
					.push(effectScatter);
			myChart.setOption(myOption);
		}
	},
	error : function(errorMsg) {
		//請求失敗時執行該函數
		alert("圖表請求數據失敗!");
		myChart.hideLoading();
	}
});//end ajax

後端數據返回：

@RequestMapping("show")
	@ResponseBody
	public String show(Model model) {
		List<EcharsData> list = new ArrayList<EcharsData>();
		list.add(new EcharsData("帽子", 50));
		list.add(new EcharsData("鞋子", 126));
		list.add(new EcharsData("毛衣", 75));
		list.add(new EcharsData("羽絨服", 201));
		list.add(new EcharsData("羊毛衫", 172));
		return JSON.toJSONString(list);
	}