echarts 真的是個神奇的東西,最近做了一個需要點亮中國的移動端項目,前期就怎樣點亮中國做了調研,發現微博當初炫酷的點亮效果就是用echarts做的,於是研究了一下。 一連研究了一堆demo,不管從官網還是GitHub上面,大多demo的數據都是自己的格式,於是乎根據API自己研究了一下,把de ...
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。