echarts 点亮中国插件研究

echarts 真的是个神奇的东西,最近做了一个需要点亮中国的移动端项目,前期就怎样点亮中国做了调研,发现微博当初炫酷的点亮效果就是用echarts做的,于是研究了一下。

一连研究了一堆demo,不管从官网还是GitHub上面,大多demo的数据都是自己的格式,于是乎根据API自己研究了一下,把demo和最终结果整理了一下。

网盘:https://pan.baidu.com/s/15ndzg5xjm0yqNL-6pi6SsQ 密码:idub

demo效果:

项目效果:

 

看上去效果不同是由于底色和数据量不同造成的。

一闪一闪的效果是由css3的循环显示隐藏制作 ,2个canvas,下面那个为地图背景,上面的是城市的点。

emmm,具体API我就不分析了,参考echarts官网:http://echarts.baidu.com/  

还有就是data数据里有一串代码:

{
                    name: '',
                    //                type: 'effectScatter',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    showEffectOn: 'render',
                    rippleEffect: {
                        period: "5",
                        scale: "7",
                        brushType: 'stroke',
                        //brushType: 'fill',
                    },
                    data: [{
                        "value": ["123.50", "26.03", "1"]
                    }, {
                        "value": ["123.0", "25.93", "1"]
                    }, {
                        "value": ["122.8", "25.73", "1"]
                    }, {
                        "value": ["121.4", "22.33", "1"]
                    }, {
                        "value": ["119.55", "23.28", "1"]
                    }],
                    symbolSize: 2,
                    itemStyle: {
                        normal: {
                            color: '#3a9cbd' // 数据点颜色
                        }
                    }
                }

这是客户要求加的南海的几个岛屿,echarts的china文件里没带,我就自己加上了。上面的gif图是项目做一半的时候录的 那时候还没有加上,请参考最终demo。

 

posted @ 2018-11-27 16:12  一只迷路精灵  阅读(1120)  评论(1编辑  收藏  举报