最近專案中有一個需求，要求折線圖點位的實際值大於閾值的時候，對應的點位要實現閃爍的效果，網上百度了一通，只找到一篇有一點啟發的博文，但是內容只是點到即止，對於我這種腦子電量不足的人來說，有點不夠用，如果你的電量滿格可以點選這裡看看。
  先來看看實現的簡單效果：

   首先要實現這樣的效果需要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。