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。