echarts使用笔记之实现让折线的拐点闪烁的效果

  最近项目中有一个需求，要求折线图点位的实际值大于阈值的时候，对应的点位要实现闪烁的效果，网上百度了一通，只找到一篇有一点启发的博文，但是内容只是点到即止，对于我这种脑子电量不足的人来说，有点不够用，如果你的电量满格可以点击这里看看。
  先来看看实现的简单效果：

   首先要实现这样的效果需要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。