首页 > > 网页制作 > Javascript >

echarts 点亮中国插件研究

2018-11-27 08:29:01来源：博客园阅读 ()

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' // 数据点颜色
                        }
                    }
                }