echart 地图 添加 涟漪效果

988 阅读1分钟

参考www.makeapie.com/editor.html…

image.png

 {
                    tooltip: {
                        show: true,
                    },
                    type: 'effectScatter',
                    coordinateSystem: 'geo',//地图坐标系
                    rippleEffect: {
                        scale: 10,
                        brushType: 'stroke',
                    },
                    showEffectOn: 'render',
                    itemStyle: {
                        normal: {
                            shadowColor: '#0ff',
                            shadowBlur: 10,
                            shadowOffsetX: 10,
                            shadowOffsetY: 0,
                            color: function (params) {
                              //渐变看用的是哪个版本的echart 自己替换
                                var colorList = [
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#64fbc5',
                                        },
                                        {
                                            offset: 1,
                                            color: '#018ace',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#64fbc5',
                                        },
                                        {
                                            offset: 1,
                                            color: '#018ace',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#168e6d',
                                        },
                                        {
                                            offset: 1,
                                            color: '#c78d7b',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#61c0f1',
                                        },
                                        {
                                            offset: 1,
                                            color: '#6f2eb6',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#168e6d',
                                        },
                                        {
                                            offset: 1,
                                            color: '#c78d7b',
                                        },
                                    ]),
                                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#61c0f1',
                                        },
                                        {
                                            offset: 1,
                                            color: '#6f2eb6',
                                        },
                                    ]),
                                ];
                                return colorList[params.dataIndex];
                            },
                        },
                    },
                    label: {
                        normal: {
                            color: '#fff',
                        },
                    },
                    symbol: 'circle',
                    symbolSize: [20, 5],
                    data: mapDate,//和其他图的数据一样就可以
                    zlevel: 1,
                },